Floating menu (alleen in body?)

[oli4tje]

Hey allemaal,

ik ben nog maar net begonnen met het werken aan mn nieuwe site! Op dit moment ben ik nog niet bijster ver. Ik heb nu zo een menutje van het web geplukt dat zo meescrolt met je pagina:

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">
<table border="1" width="130" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" bgcolor="#FFFFFF">
<A href="http://www.zwat.be"><IMG src="http://oli4tje.webs.com/Oliviers testpagina/buttons/button1over"></A>
<A href="http://www.zwat.be/Atleten"><IMG src="http://oli4tje.webs.com/Oliviers testpagina/buttons/button2over"></A>
<A href="http://www.zwat.be/Trainers"><IMG src="http://oli4tje.webs.com/Oliviers testpagina/buttons/button3over"></A>
<A href="http://www.zwat.be/Jeugd"><IMG src="http://oli4tje.webs.com/Oliviers testpagina/buttons/button4over"></A>
<A href="http://www.zwat.be/Iets"><IMG src="http://oli4tje.webs.com/Oliviers testpagina/buttons/button5over"></A>
<A href="mailto:peeterskenolivier@hotmail.com"><IMG src="http://oli4tje.webs.com/Oliviers testpagina/buttons/button6over"></A>
</layer>
  </tr>
</table>

<script type="text/javascript">

/*
Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 10,
	startY = 300;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

Hier is het voorbeeldje

Toch heb ik een probleempje. Ik zou graag hebben dat dit menu niet in de head te zien is, het zorgt er namelijk voor dat mn logo & hoofding minder goed te bekijken is. Is daar een oplossing voor? Doe ik iets verkeerd in mn scriptje?


Alvast bedankt voor jullie hulp!
MVG
oli4tje

 

[That Guy]

Ik zou graag hebben dat dit menu niet in de head te zien is, het zorgt er namelijk voor dat mn logo & hoofding minder goed te bekijken is.

Wat bedoel je daar precies mee?

Doe ik iets verkeerd in mn scriptje?

Nou..... eigenlijk het hele idee

Javascript gebruiken voor een menu is een Slecht Idee. Het leuke is echter, dat je precies hetzelfde effect kan bereiken door geen Javascript te gebruiken. Dat maakt je site EN bruikbaarder voor mensen zonder Javascript, EN scheelt 'moeilijke code'.

meer dan 9/10 browsers ondersteunen ondertussen wel de CSS position. Gebruik de fixed property. Zie bijvoorbeeld deze voorbeeld en.


:thumb:

 

[oli4tje]

Wat bedoel je daar precies mee?




Nou..... eigenlijk het hele idee

Javascript gebruiken voor een menu is een Slecht Idee. Het leuke is echter, dat je precies hetzelfde effect kan bereiken door geen Javascript te gebruiken. Dat maakt je site EN bruikbaarder voor mensen zonder Javascript, EN scheelt 'moeilijke code'.

meer dan 9/10 browsers ondersteunen ondertussen wel de CSS position. Gebruik de fixed property. Zie bijvoorbeeld deze voorbeeld en.


:thumb:

Heel veel bedankt voor de tips! Ik heb op dit moment volgende code:

<style type="text/css">
div.banner {
	margin: 0;
	font-size: 100% ;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	position: fixed;
	top: 10em;
	left: auto;
	width: 8.5em;
	right: 0 px;
}


div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #CCC }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }
</style>

Nu,
wat ik bedoel; ik bouw eigenlijk rond een site uit 4 delen!
Ik hoop dat dit voor jouw wat verduidelijkt?

Das dus de theorie!
Hier is de praktijk!
Hier zie je dus dat mn sloganzin (nu: Welkom op de pagina met alle jeugdinformatie .....) & het logo (beiden in mn hoofding geplaatst) onderbroken wordt door die buttons die meescrollen :S !

MVG
oli4tje

M

 

[That Guy]

Aha! Nu is het duidelijk! :thumb:



Het eerste wat je MOET (tsja... moet? Het maakt het een STUK makkelijker!) gaan doen om dit goed te laten werken is GEEN tabellen te gebruiken voor je layout. Probeer zoiets te krijgen:

<html>
   <head>
      <!-- head stuff -->
   </head>

   <body>

      <div id='header'>
      </div>

      <div id='menu'>
      </div>

      <div id='content'>
      </div>
   </bod>
</html>

het is natuurlijk een voorbeeldje, maar het gaat om het idee. Deze div's kan je netjes stijlen, met breedte en hoogtte. Daarna kan je je 'fancy' menu bouwen, door deze net-even-iets-anders te stijlen!


:thumb: