Menu et sous-menu

**loic20h28** · 11/04/2009, 22h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

**desert** · 12/04/2009, 11h06

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<ul>
    <li>
        <a href="#">test</a>
        <!-- Sous-menu -->
        <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.

**loic20h28** · 12/04/2009, 14h07

Bonjour,

Merci pour ta réponse.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**desert** · 12/04/2009, 14h44

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**loic20h28** · 12/04/2009, 15h01

Merci beaucoup pour ton aide.

Cela fonctionne parfaitement à présent.

Menu et sous-menu [HTML 4.0]

HTML

Discussions similaires

Partager

Partager