Un menu de navigation latéral qui apparaît et s'escamote au passage de la souris.
Etape 1 :Ajouter dans le <HEAD> :
<script language="JavaScript1.2"> function move(x) { if (document.all) { object1.style.pixelLeft += x; object1.style.visibility = "visible"} else if (document.layers) { document.object1.left += x; document.object1.visibility = "show"}}; // La position du menu par rapport au bord haut var fromtop=40 function makeStatic() { if (document.all) {object1.style.pixelTop=document.body.scrollTop+fromtop} else {eval(document.object1.top=eval(window.pageYOffset+fromtop));} setTimeout("makeStatic()",0);} </script> <style> <!-- .nounderline { text-decoration:none } .hl { background-Color : yellow; cursor:hand; } .n { cursor:hand; } --> </style>
Il faut simplement configurer ici la position du menu par rapport au bord supérieur soit var fromtop=xx
Etape 2 :Ajouter dans la balise <BODY> :
<LAYER visibility="hide" top="20" name="object1" bgcolor="black" left="0" onmouseover="move(214)" onmouseout="move(-214)"> <script language="JavaScript1.2"> function positionmenu(){ move(-214) } if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 10px ;Z-Index : 20" onmouseover="move(214)" onmouseout="move(-214)">')} </script> <table border="0" cellpadding="0" cellspacing="1" width="230" bgcolor="#000000"> <tr><td bgcolor="#0099FF"> <font size="3" face="Arial"><b>Menu</b></font></td> <script language="JavaScript1.2"> document.write('<td align="center" rowspan="214" width="16" bgcolor="#FF6666"><span style="font-size:11px"><p align="center"><font face="Arial"><B>C<br>o<br>n<br>t<br>e<br>n<BR>u<BR> <BR>d<BR>u<BR> <BR>s<BR>i<BR>t<BR>e</B></font></p></span></TD>') </script> </tr> <script language="JavaScript1.2"><!-- if (document.all||document.layers) { makeStatic();} var text=new Array(); var thelink=new Array(); // Configurer les éléments du menu. text[0]="Nouveaux scripts"; text[1]="Effets et animations de texte"; text[2]="Effets et animations d'images"; text[3]="Transitions de pages"; text[4]="Scrollers ou textes défilants"; text[5]="Liens, boutons et formulaires"; text[6]="Infobulles et menus de navigation "; text[7]="Browsers et fenêtres"; text[8]="Dates et heures dynamiques"; text[9]="Pour le plaisir des yeux "; text[10]="Scripts divers"; // Configurer les liens associés aux éléments du menu. thelink[0]="tbnews.html"; thelink[1]="tbtexte.htm"; thelink[2]="tbimage.htm"; thelink[3]="tbtrans.htm"; thelink[4]="tbscroll.htm"; thelink[5]="tblinks.htm"; thelink[6]="tbinfo.htm"; thelink[7]="tbbrow.htm"; thelink[8]="tbdate.htm"; thelink[9]="tbyeux.html"; thelink[10]="tbdivers.htm"; // L'attribut target des liens (facultatif) // Les valeurs acceptées sont '', 'new', or 'framename' (où 'framename' est le nom du frame de destination) var linktarget='' //////////////////////////////////////////////// function navigateie(which){ if (linktarget=='') window.location=thelink[which] else if (linktarget=='new') window.open(thelink[which]) else{ temp_var=eval("window.parent."+linktarget) temp_var.location=thelink[which] } } for (i=0;i<=text.length-1;i++) if (document.all) {document.write('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL> '+text[i]+'</FONT></TD></TR>')} else {document.write('<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\'yellow\'" onmouseout="this.bgColor=\'white\'" width=131><FONT SIZE=2 FACE=ARIAL> <A HREF="'+thelink[i]+'" target="'+linktarget+'">'+text[i]+'</A></FONT></LAYER></ILAYER></TD></TR>')} //--> </script> <tr> <td bgcolor="#0099FF"><font size="1" face="Arial"> </font></td> </TR> </table> <script language="JavaScript1.2"> if (document.all) {document.write('</DIV>')} window.onload=positionmenu </script> </LAYER>
Pour comprendre un temps soit peu le script, il faut savoir que le menu de navigationdéroulant est un fait un simple tableau (écrit en Javascript) qui apparaît et disparaît aupassage de la souris.
Le script est peut-être un peu brouillon mais nous allons nous y retrouver.