Bonjour,
Je précise que je débute dans la Grande Cuisine à base de HTML, PHP, CSS, JS... et progresse par essais successifs n'ayant eu pour formation que mes lectures (passionnantes) sur le web.
Dans le cadre d'un projet, j'ai besoin d'installer un menu vertical gauche. j'ai téléchargé le Menu Vertical Déroulant 2 de la page http://css.developpez.com/galerie/?p...-verticaux#MV1.
Le résultat visuel me convient bien, et le comportement du menu est impeccable sur la première page. Malheureusement, à chaque changement de page, il se remet à son état initial (fermé), c'est à dire ne montrant que les menus principaux et n'est plus "clickable"... impossible donc d'accéder aux sous menus...
Voici le 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 /*************************************************** MENU VERTICAL GAUCHE DEROULANT ***************************************************/ #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; }
le JS
Code javascript : 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 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"; } } }
et le HTML d'appel
Code html : 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 <div id="menu"> <div class="menu" id="menu1" onclick="afficheMenu(this)"> <a href="#">Infos</a> </div> <div id="sousmenu1" style="display:none"> <div class="sousmenu"> <a href="Info_1.php">Infos Générales</a> </div> <div class="sousmenu"> <a href="Info_2.php">Besoins</a> </div> <div class="sousmenu"> <a href="Info_3.php">Activité</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"> <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>
J'ai fait de vaines recherches jusqu'ici, si quelqu'un pouvait me mettre sur la voie, cela serait sympa...
Merci
Partager