Démo : Cliquez sur "Table des matières"
Etape 1 :Ajouter entre les balises <HEAD>...</HEAD>:
<script language="JavaScript1.2"> /* Drop down menu link © Dynamic Drive (www.dynamicdrive.com) */ // Contenu du menu déroulant var menu1=new Array() menu1[0]='<a href=test.htm>Texte du lien ici</a><br>' menu1[1]='<a href=test.htm>Texte du lien ici </a><br>' menu1[2]='<a href=test.htm>Texte du lien ici </a><br>' // que vous pouvez étendre bien entendu </script> <style> <!-- .iewrap1{ position:relative; height:30px; } .iewrap2{ position:absolute; } #dropmenu0{ visibility:hide; z-index:100; } --> </style>
On devra configurer les liens dans cette partie. Voir... menu1[0]='<a href=test.htm>Texte du lien ici</a><br>'au début du script
Etape 2 :Ajouter dans le body pour réaliser l'effet.
<script language="JavaScript1.2"> var zindex=100 function dropit2(whichone){ if (window.themenu&&themenu.id!=whichone.id) themenu.style.visibility="hidden" themenu=whichone if (document.all){ themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (themenu.style.visibility=="hidden"){ themenu.style.visibility="visible" themenu.style.zIndex=zindex++ } else{ hidemenu() } } } function dropit(e,whichone){ if (window.themenu&&themenu.id!=eval(whichone).id) themenu.visibility="hide" themenu=eval(whichone) if (themenu.visibility=="hide") themenu.visibility="show" else themenu.visibility="hide" themenu.zIndex++ themenu.left=e.pageX-e.layerX themenu.top=e.pageY-e.layerY+19 return false } function hidemenu(whichone){ if (window.themenu) themenu.style.visibility="hidden" } function hidemenu2(){ themenu.visibility="hide" } if (document.all) document.body.onclick=hidemenu </script> <!----------Commencement du menu----------> <ilayer height=35px> <layer visibility=show> <span class=iewrap1> <span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><a href="#" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">Cliquez ici</a> </span> </span> </layer> </ilayer><br> <!----------Fin du menu---------->
On peut modifier "Cliquez ici" (ce que nous avons fait par "Table des matières") à la fin de cette partie. Toutes les balises de formatage sont acceptées.
Etape 3 :Ajouter à la fin de la page, juste avant </BODY>
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) dropmenu0.style.padding="4px" for (i=0;i<menu1.length;i++) document.write(menu1[i]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.dropmenu0.captureEvents(Event.CLICK) document.dropmenu0.onclick=hidemenu2 } </script>
On peut modifier plusieurs paramètres dans la balise <div> de cette partie. Ainsi on peut changer la couleur de l'arrière-plan [background-color], ici lightyellow ou la largeur du menu déroulant [width], ici 120 ou l'épaisseur du bord [border:2px], ici 2 pixels ou même la couleur de celui-ci, ici black...
Notes: La nature de ce script impose un alignement à gauche. Pour tout autre alignement (centre ou droite), il faudra passer par un tableau.
Pour rappel, si vous utilisez l'apostrophe dans le texte, vous devrez mettre \'.
