[JS] Menu, Sous-Menu, Sous-Sous-Menu, etc
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 :mrgreen: 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:
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:
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 :P
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
|
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 :D:D
Correction du test effectué
Merci encore de répôndre si vite :ccool::ccool:
Pour le niveau 3 je suis passer par un iframes :aie::aie::aie:
Ce n'est pas du tout correct ...
Et après j'ai fait du bidouillage :?:?
Code:
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 :aie::aie::aie:
d'où l'utilité de passer par une page test que j'ai fait et que vous pouvez voir plus haut :mrgreen:
Cordialement
