[JS] Menu dynamique

Jetsurfer

Membre actif
1 Février 2001
383
4
Bonjour les As,
je voudrais faire un menu dynamique pour mon site à savoir, quand je clique sur un des éléments du menu et bien les sous-menus avec les liens apparaissent.
Bon ici avec ce script tout se passe bien si il n'y a q'un seul sous-menu par la suite j'ai des problèmes
frown.gif
si quelqu'un pouvait m'expliquer cela ne serait pas plus mal.
wink.gif

Le pied serait bien entendu qu'il ne faut pas cliquer sur le menu pour que les sous-menus apparaissent mais seulement passer avec sa souris, mais là je demande peut être beaucoup.
grin.gif


Voici le script :
A placer dans le <head> :

<STYLE TYPE="text/css"><!--
.ferme { display: none }
.ouvre { display: block }
--></STYLE>
<-- ou feuille de style externe comme cela on a tout au même endroit-->

<script language="JavaScript">
<!--
function doit(header){
var head=header;
flag="0";

if (head.className=="ferme") { flag="1" } // test : le menu pressé est-il fermé ?

document.getElementById("1").className = "ferme"; // on cache tous les sous-menu
document.getElementById("2").className = "ferme";
document.getElementById("3").className = "ferme";

// si il y a plus de menus rajoutez des lignes:
// document.getElementById("4").className = "ferme";
// document.getElementById("5, 6, etc..").className = "ferme";

if (flag=="1") { head.className="ouvre" } // si le menu pressé était fermé, on l'ouvre (flag=1)
// s'il était ouvert, on le laisse fermé (flag=0)
}
// -->
</script>

Puis ceci pour le <body>

<div style="cursor:hand" onClick="doit(document.getElementById('1'))">Titre du menu 1</div>
<span class="ouvre" id="1">sous-menu 1</span>

<br><div style="cursor:hand" onClick="doit(document.getElementById('2'))">Titre du menu 2</div>
<span class="ferme" id="2">sous-menu 2</span>

<br><div style="cursor:hand" onClick="doit(document.getElementById('3'))">Titre du menu 3</div>
<span class="ferme" id="3">sous-menu 3</span>


<!-- si le nombre de menu est plus important, rajouter des lignes come par exemple :
<br><div style="cursor:hand" onClick="doit(document.getElementById('4'))">Titre du menu 4</div>
<span class="ferme" id="4">sous-menu 4</span> -->