Menu avec arborescence
Lien
Lien
Lien
Lien
Lien
Lien
Lien
Lien
Lien
Lien
Afficehr Sous-Menu 1
Afficher Sous-Menu 2
Afficher Sous-Menu 3
A placer entre les balises < head > et < /head > :
<script language="javascript"> total = 3; // Entrez ci-dessus le nombre de sous-menus control = total+1; function cache(n) { document.getElementById(n).style.visibility = 'hidden'; } function montre(n) { document.getElementById(n).style.visibility = 'visible'; document.getElementById(n).style.left = event.clientX + document.body.scrollLeft; document.getElementById(n).style.top = event.clientY + document.body.scrollTop; } function controle(n) { for(i = 1; i < control; i++) { if((document.getElementById(i).style.visibility = 'visible')&&(i != n)) { document.getElementById(i).style.visibility = 'hidden'; } } } </script>
A placer entre les balises < body > et < /body > :
<DIV ID="1" STYLE="position:absolute;visibility:hidden" onmouseout="cache(1)"> <table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1> <tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(1).style.visibility = 'visible';controle(1)"> <font face="verdana" size=1 color="#ffffff"><b> <a href="" STYLE="color:#ffffff">Lien</a><br> <a href="" STYLE="color:#ffffff">Lien</a><br> <a href="" STYLE="color:#ffffff">Lien</a><br> </td></tr></table> </DIV> <DIV ID="2" STYLE="position:absolute;visibility:hidden" onmouseout="cache(2)"> <table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1> <tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(2).style.visibility = 'visible';controle(2)"> <font face="verdana" size=1 color="#ffffff"><b> <a href="" STYLE="color:#ffffff"><b>Lien</b></a><br> <a href="" STYLE="color:#ffffff"><b>Lien</b></a><br> <a href="" STYLE="color:#ffffff"><b>Lien</b></a><br> <a href="" STYLE="color:#ffffff"><b>Lien</a></b> </td></tr></table> </DIV> <DIV ID="3" STYLE="position:absolute;visibility:hidden" onmouseout="cache(3)"> <table width=150 bgcolor="#004080" cellpadding=0 cellspacing=1> <tr><td bgcolor="#4890c0" STYLE="padding:4" onmouseover="document.getElementById(3).style.visibility = 'visible'"> <font face="verdana" size=1 color="#ffffff"><b> <a href="" STYLE="color:#ffffff"><b>Lien</b></a><br> <a href="" STYLE="color:#ffffff"><b>Lien</b></a><br> <a href="" STYLE="color:#ffffff"><b>Lien</b></a><br> </td></tr></table> </DIV> <table width="400" cellpadding=3 border=1 bordercolor="#FFFFFF" bgcolor="#FFFFFF" cellspacing=0 bordercolorlight="#000000" bordercolordark="#C0C0C0"> <td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(1);controle(1)"><font face=verdana size=1>Afficehr Sous-Menu 1</font></td></a> <td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(2);controle(2)"><font face=verdana size=1>Afficher Sous-Menu 2</font></td></a> <td width=400 STYLE="cursor:hand;color:#FFFFFF;background-color:#004080" onmouseout="this.style.background='#004080'" onmouseover="this.style.background='#FF8000';montre(3);controle(3)"><font face=verdana size=1>Afficher Sous-Menu 3</font></td></a> </table>
Remplacez la balise body par:
<body>