Menu et sous-menu

Version imprimable

Menu et sous-menu

Bonjour tout le monde,

je souhaite réaliser un site web avec un menu et des sous-menus.

Voici le code que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> new </title> <script language="javascript" type="text/javascript"> function Affiche(nom) { fichier = document.getElementById(nom) if (fichier.style.display == "none" ) { fichier.style.display = "" } else { fichier.style.display = "none" } } </script> </head> <body> <ul> <li><a href="javascript:void(0)" onClick="Affiche('sous-menu')">part1</a></li> <ul> <li id="sous-menu" style="display:none;"><a href="chapitre1.html">chap1</a></li> <li id="sous-menu" style="display:none;"><a href="chapitre2.html">chap2</a></li> </ul> <li><a href="javascript:void(0)" onClick="Affiche('sous-menu2')">part2</a></li> <ul> <li id="sous-menu2" style="display:none;"><a href="chapitre3.html">chap3</a></li> </ul> </ul> </body> </html>
J'ai 2 problème :
1) Lorsque je clique sur le lien "part1", il m'affiche que le premier sous-menus "chap1" alors que je devrais avoir "chap1" et "chap2" en 2 sous-menus. Comment puis-je faire??
2) Je souhaiterais faire en sorte que si je clique sur un autre lien du menu (donc par exemple sur "Part2") le sous menu du menu "Part1" disparait. Comment puis-je faire??

Merci d'avance!!

12/04/2009, 10h06
desert
Bonjour,
Il y a plusieurs choses qui clochent dans ton code :
- Il manque des ; à la fin des opérations javascript.
- Un id doit rester unique donc deux éléments ne peuvent pas avoir le même id.
- Les balises ul des sous-menus doivent être à l'intérieur de balises li.
Code:

1 2 3 4 5 6 7 8 9 <ul> <li> <a href="#">test</a>  <ul> <li><a href="#">test1</a></li> </ul> </li> </ul>
Ce qu'il faudrait faire, c'est d'appliquer un id sur les balise ul des sous-menus plutôt que pour chaque balise li enfant (il en va de même pour le display:none).
Comme cela, au lieu de jouer avec chaque li séparément, tu utiliseras tout l'ensemble du sous-menu.

réponse à desert

Bonjour,

Merci pour ta réponse.

Donc maintenant, j'ai bien tout les sous-menus qui s'affichent via le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> new </title> <script language="javascript" type="text/javascript"> function Affiche(nom) { fichier = document.getElementById(nom) if (fichier.style.display == "none" ) { fichier.style.display = ""; } else { fichier.style.display = "none"; } } </script> </head> <body> <ul> <li> <a href="javascript:void(0)" onClick="Affiche('sous-menu')">part1</a> <ul id="sous-menu" style="display:none;"> <li><a href="chapitre1.html">chap1</a></li> <li><a href="chapitre2.html">chap2</a></li> </ul> </li> <li> <a href="javascript:void(0)" onClick="Affiche('sous-menu2')">part2</a> <ul id="sous-menu2" style="display:none;"> <li><a href="chapitre3.html">chap3</a></li> </ul> </li> </ul> </body> </html>
Un exemple de ce que je souhaite faire :
1) je clique sur "Part1" -> les sous-menus s'affichent de "Part1".
=> Ceci fonctionne parfaitement!!
2) Si je clique sur "Part2" alors que je viens de cliquer sur "Part1" -> les sous-menus de "Part2" s'affichent et les sous-menus de "Part1" deviennent invisible!!
=> Mon problème est pour faire disparaitre les sous-menus
Comment puis-je faire??

Cordialement

Tu pourrais par exemple stocker le sous-menu visible dans une variable globale.
Comme cela, dès que tu cliqueras sur un autre sous-menu par la suite, tu pourras voir si il y en a déjà un de visible.
Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    var ancienUL = null;
    function Affiche(nom) {
        fichier = document.getElementById(nom);
        if (fichier.style.display == "none" )
            fichier.style.display = "block";
        else
            fichier.style.display = "none";
        if (ancienUL != null)
            ancienUL.style.display = "none";
        ancienUL = fichier;
    } 
</script>

12/04/2009, 14h01
loic20h28

réponse à desert

Merci beaucoup pour ton aide.

Cela fonctionne parfaitement à présent.