Menu déroulant vertical

Bonjour! ;)

J'essaie de faire un menu vertical, avec déroulement sur la droite un peu comme ICI, mais sur 3 niveaux

Voici mon code

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
 
 
<div class="menu" id="menu7" onmouseover="affiche(this)" onmouseout="affiche2(this)">
	   <a href="#">Carterie</a>
	     <div class="sousmenu" id="sousmenu7" style="display:none" onmouseover="affiche(this)" onmouseout="affiche2(this)">
			  <div><a href="#">Carte postale</a></div>
 
			        <div class="soussousmenu" id="soussousmenu7" style="display:none" onmouseover="affiche(this)" onmouseout="affiche3(this)">
			           <div><a href="#">Villes et Régions</a></div>
					   <div><a href="#">Anniversaire</a></div>
					   <div><a href="#">Fin d'Année</a></div>
					   <div><a href="#">Sans voeux</a></div>					   
				   </div>	   
 
			  <div><a href="#">Carnet double</a></div>	
 
                                                 <div class="soussousmenu" id="soussousmenu8" style="display:none" onmouseover="affiche(this)" onmouseout="affiche3(this)">
			           <div><a href="#">Fin d'Année</a></div>
					   <div><a href="#">Anniversaire</a></div>
					   <div><a href="#">Mariage</a></div>
					   <div><a href="#">Naissance</a></div>
					   <div><a href="#">Retraite</a></div>
					   <div><a href="#">Condoléance</a></div>
					   <div><a href="#">Merci</a></div>
					   <div><a href="#">Sans voeux</a></div>
					   <div><a href="#">Prompt Rétablissement</a></div>
				   </div>			
		</div>
	</div>

Et voici le javacript:

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
 
function affiche(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 4; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}
 
function affiche2(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 4; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "none";
	}
}
 
function affiche3(obj){
	var id = obj.id;
 
	for(var i = 1; i <= 8; i++){
		document.getElementById('soussousmenu'+i).style.display = "block";
	}
 
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}

Cela fonctionne pour les "cartes postales", mais pas pour les "carnets doubles"!

Pourquoi?

Merci! :D

Citation:

id="soussousmenu8"

est mal placé!

Comment ça? :bug:

Code:

1
2
3
<div class="soussousmenu" id="sousmenu8" style="display:none" onmouseover="affiche(this)" onmouseout="affiche3(this)">
 
<div id="soussousmenu8" >

Et bien en fait "carnet double" et "cartes postales" affichent la même chose !

Si cela marche pour soussousmenu7, pourquoi pas pour le 8 ?

bonjour,

à l'origine ce menu n'est pas conçu pour plusieurs niveaux... Je l'ai volontairement limité à 1 niveau (à cause de la gestion des événements qui devenait délicate).

C'est bon!

J'ai joué des coudes, mais cela fonctionne, en créant de nouvelles fonctions spécialement pour chaque parties du troisième niveau...

Cela fait un peu code brouillon, mais bon...:yaisse2:

Merci à tous! :king:

Citation:

Envoyé par snaxisnake

C'est bon!

J'ai joué des coudes, mais cela fonctionne, en créant de nouvelles fonctions spécialement pour chaque parties du troisième niveau...

8O il faudra que tu nous dises comment tu as fait :D