Discussion :

[snaxisnake]

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 :

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

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

[Matthieu2000]

id="soussousmenu8"

est mal placé!

[snaxisnake]

Comment ça?

[Matthieu2000]

Code :

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

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

[snaxisnake]

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

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

[Auteur]

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).