[JS] Menu, Sous-Menu, Sous-Sous-Menu, etc

**Epica84** · 19/02/2010, 10h45

Bonjour à tous,

J'ai un little souci.

Débutant en prog web je m'attaque à JS, j'essaye de faire un menu avec un sous menu , un sous sous menu ,... jusqu'à infinie

enfin suivant les données de la base de données .

Ces menus ainsi que leur sous menu doivent si possible apparaitre avec un effet genre slide, ils doivent se réroulés sur un même axe. c'est à dire verticalement.

Voici une idée général mais je n'arrive pas à faire les sous-sous-menu

Merci de m'aider

Voici la démo dispo sur le net : http://css.developpez.com/galerie/demo/menus/verticalderoulant1/

Voici les codes pour le menu ainsi que le sous menu du premier niveau :

Partie HTML

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Menu déroulant vertical sur clic</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <script type="text/javascript" src="functions.js"></script>
</head>
<body>
 
<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.4</a>
		</div>
	</div>
 
	<div class="menu" id="menu2" onclick="afficheMenu(this)">
		<a href="#">Menu 2</a>
	</div>
	<div id="sousmenu2" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 2.3</a>
		</div>
	</div>
 
	<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">Menu 3</a>
	</div>
 
	<div class="menu" id="menu4" onclick="afficheMenu(this)">
		<a href="#">Menu 4</a>
	</div>
	<div id="sousmenu4" style="display:none">
		<div class="sousmenu">
			<a href="#" >Sous-Menu 4.1</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.2</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.3</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.4</a>
		</div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 4.5</a>
		</div>
	</div>
</div>
 
</body>
</html>

Partie CSS

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
40
41
42
43
44
45
46
47
48
49
50
*{
	margin:0;
	padding:0;
}
#menu{
	width:150px;
	margin:20px auto 0 auto;
}
.menu, .sousmenu{
	text-align:center;
}
.menu{
	height:18px;
	width:150px;
	padding:2px 0;
	background:#404040;
	color:#fff;
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:#808080;
	color:#fff;
}
.menu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#404040;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:#fff;
	font-family:arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
	background:#808080;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
	background:#ca0008;
}

Et enfin partie "Slide" ou plutôt JS

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
 
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 4; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}

J'attend vos réponses avec impatience

**E.Bzz** · 19/02/2010, 11h03

Bonjour,
quel est ton problème avec les sous-sous-menus ?

Il n'y en a pas dans ta version actuelle (seulement 2 niveaux) ...

A+

**Epica84** · 19/02/2010, 11h21

Tout d'abord merci d'avoir répondu si vite

C'est bien ça le problème ...

Je n'arrive pas à créer un niveaux 3 ...

Sachant que le Niveaux 3 lorsqu'il s'ouvre il doit laisser le niveau 2 ouvert ...

[Test effectué] J'arrive à ouvrir mon niveau 3 mais lorsqu'il s'ouvre mon niveau 2 se ferme mais cette version je ne l'ai pas mise car au moins vous pouvez partir sur quelque chose qui marche ...

Cordialement

**E.Bzz** · 19/02/2010, 11h23

Envoyé par Epica84

J'arrive à ouvrir mon niveau 3 mais lorsqu'il s'ouvre mon niveau 2 se ferme mais cette version je ne l'ai pas mise car au moins vous pouvez partir sur quelque chose qui marche ...

Ben justement c'est cette version qu'il nous faudrait

Ça permettrait de partir de ce que tu as fais toi et de régler les problèmes que tu rencontres ...

A+

**Epica84** · 19/02/2010, 11h43

Merci encore de répôndre si vite

Pour le niveau 3 je suis passer par un iframes

Ce n'est pas du tout correct ...

Et après j'ai fait du bidouillage

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script>
				function resize() {document.getElementById("subsubmenu" ).height=0;
 
	}
				</script>
 
......
......
......
......
......
 
<iframe id="subsubmenu" src="mysubsubmenu" scrolling="no" frameborder="0"></iframe>

Donc comme vous pouvez le voir c'est du bidouillage et de plus lorsque je l'intégre à mon projet il marche pas

d'où l'utilité de passer par une page test que j'ai fait et que vous pouvez voir plus haut

Cordialement

**E.Bzz** · 19/02/2010, 11h46

Ben réessaye en conservant la même logique que pour les 2 premiers niveaux

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
<div id="menu">
	<div class="menu" id="menu1" onclick="afficheMenu(this)">
		<a href="#">Menu 1</a>
	</div>
	<div id="sousmenu1" style="display:none">
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.1</a>
		</div>
		<div id="soussousmenu1_1" class="sousmenu">
		         <div class="soussousmenu">
			         <a href="#">Sous-Sous-Menu 1.1.1</a>
		         </div>
		         <div class="soussousmenu">
			         <a href="#">Sous-Sous-Menu 1.1.2</a>
		         </div>
                </div>
		<div class="sousmenu">
			<a href="#">Sous-Menu 1.2</a>
		</div>