menu déroulant à 2 niveaux : pour ceux qui le veulent, il suffit de se servir

**trotters213** · 17/10/2006, 12h39

je suis un néophyte en javascript et j'ai problème sur lequel je me casse les dents depuis ce matin : j'avais un menu déroulant à 1 seul niveau (qui marche nickel) que j'essaie de transformer en menu à 2 niveaux (cf photo1).

J'arrive à afficher le 2° niveau (comme sur la photo1) mais le problème vient lorsque je change de menu de niveau 1 : les menus de niveau 2 "s'empilent" (cf photo2), je n'arrives pas à les effacer.

Le code HTML suivant correspond seulement au menu Information

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
<ul><!--niveau 0-->
<li onmouseover="montre('smenu5');" onmouseout="montre();"><img src="info.gif" alt="Informations" />
  <ul id="smenu5"><!--niveau 1-->
    <li onmouseover="montre('smenu51');" onmouseout="montre();"><a href="#">Actualités</a>
      <ul id="smenu51"><!--niveau 2-->
        <li><a href="#">sous-menus1</a></li>
        ...
      </ul>
    </li>
    <li onmouseover="montre('smenu52');" onmouseout="montre();"><a href="#">Groupe d'experts IS</a>
      <ul id="smenu52"><!--niveau 2-->
        <li><a href="#">sous-menus2</a></li>
        ...
      </ul>
    </li>
...

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
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id)
{
  var d = document.getElementById(id);
  //pour chaque rubrique
  for (var i = 1; i<=5; i++)
  {
    //si la souris ne pointe pas dessus, on n'affiche pas la liste déroulante de sous-menu
    if (document.getElementById('smenu'+i)) 
    {
      document.getElementById('smenu'+i).style.display='none';
    }
  }
 
  if (d)
  {
    d.style.display = 'block';
  }
}

Je me bats avec les noeuds et compagnie mais je ne m'en sort pas.
Toutes les suggestions sont les bienvenues.

Merci d'avance pour votre aide.

**trotters213** · 17/10/2006, 16h30

j'ai un début de réponse en faisant ceci :

Code JAVASCRIPT :

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

1
2
3
4
5
for (var i=0 ; i<d.childNodes.length ; i++)
{
	if (d.childNodes[i].nodeType!='3') d.childNodes[i].style.display='none';
}
d.style.display = 'block';

mais le problème c'est que là j'empêche l'affichage des fils et non des frères!

Comment faire?

**Bisûnûrs** · 17/10/2006, 16h37

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
for (var i = 1; i<=5; i++){
    //si la souris ne pointe pas dessus, on n'affiche pas la liste déroulante de sous-menu
   if (document.getElementById('smenu'+i)) 
   {
      document.getElementById('smenu'+i).style.display='none';
      for (var j = 1; j<=5; j++){
         if (document.getElementById('smenu'+i+j)) 
         {
            document.getElementById('smenu'+i+j).style.display='none';
         }
      }
   }
}

Mais je me demande s'il ne va pas additionner i et j au lieu de les concaténer ...

Edit :

Apparemment non, ce code fonctionne bien et i et j sont bien concaténés :

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
<script language="javascript">
for(var i = 1; i<5; i++){
   for(var j = 1; j<5; j++){
      alert("test"+i+j);
   }
}
</script>

**trotters213** · 17/10/2006, 17h08

http://javascript.developpez.com/faq...axe#ConcatPlus

**Bisûnûrs** · 17/10/2006, 17h31

Et sinon ça donne quoi avec mon code ?

**trotters213** · 18/10/2006, 08h28

Je l'ai déjà testé ça mais la difficulté c'est de faire apparaitre les menus de niveau 2 car avec ceci ils n'apparaissent plus.

**trotters213** · 18/10/2006, 15h45

Chez moi on dit (enfin on crit) : AQUIIII NÈÈÈNEEEEEEEEEEUUUUUU quand on a passé 3 jours à chercher une réponse à un problème et qu'enfin on la trouve

Je vais pas tout marquer parce qu'il y a du HTML, du CSS et du Javascript mais si ça interesse quelqu'un qu'il fasse signe (ça passe identiquement sur IE, FF et Opera, j'ai pas tester les autres).

**Bisûnûrs** · 18/10/2006, 16h01

Ca m'intéresse, oui.

**trotters213** · 18/10/2006, 16h15

Bon bè c'est parti :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--définition du DOCTYPE et de la méthode de sortie : XHTML-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
 
<!--inclusion CSS-->	
<link rel="stylesheet" href="text.css" type="text/css" />
<!--affichage de l'icone IRD dans la barre de navigation-->	
 
<!--inclusion script Javascript pour le menu déroulant-->
<script language="JavaScript" src="menu_deroulant.js" type="text/javascript"></script>
</head>
<body>
<div id="centrer">
 
<div id="menu">
	<ul>		
		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);"><img src="info.gif" alt="Informations" />
			<ul id="smenu5">
				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">smenu51</a>
					<ul class="dernier" id="smenu51">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Groupe d'experts IS</a></li>
				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">smenu52</a>
					<ul class="dernier" id="smenu52">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">smenu53</a>
					<ul class="dernier" id="smenu53">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Colloques</a></li>
				<li><a href="#">Liens utiles</a></li>
				<li><a href="#">Glossaire</a></li>
			</ul>
		</li>
		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><img src="donnees.gif" alt="Accès aux données" />
			<ul id="smenu4">
				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">smenu41</a>
					<ul id="smenu41">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">smenu42</a>
					<ul id="smenu42">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Banques internationales</a></li>
				<li><a href="#">Autres</a></li>
			</ul>
		</li>	
		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);"><img src="outils.gif" alt="Outils et services" />
			<ul id="smenu3">
				<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">smenu31</a>
					<ul id="smenu31">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li onmouseover="montre('smenu32',true);" onmouseout="montre('smenu32',false);"><a href="#">smenu32</a>
					<ul id="smenu32">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Boîte à outils Informatique Scientifique</a></li>
				<li><a href="#">Logiciels et algorithmes développés par l'IRD</a></li>
				<li><a href="#">Moyens de calcul existants</a></li>
				<li><a href="#">Serveur FTP</a></li>
				<li onmouseover="montre('smenu33',true);" onmouseout="montre('smenu33',false);"><a href="#">smenu33</a>
					<ul id="smenu33">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Marchés et téléchargements</a></li>
			</ul>			
		</li>
		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);"><img src="methodo.gif" alt="Appui méthodologique" />
			<ul id="smenu2">
				<li><a href="#">Ateliers thématiques - Plateforme d'échange</a></li>
				<li><a href="#">Formations</a></li>
				<li onmouseover="montre('smenu21',true);" onmouseout="montre('smenu21',false);"><a href="#">smenu21</a>
					<ul id="smenu21">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Valorisation</a></li>
				<li><a href="#">Protection des outils</a></li>
				<li onmouseover="montre('smenu22',true);" onmouseout="montre('smenu22',false);"><a href="#">smenu22</a>
					<ul id="smenu22">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Traitement de données et statistiques</a></li>
				<li><a href="#">Calcul scientifique</a></li>
				<li><a href="#">Cartographie et SIG</a></li>
				<li><a href="#">Rubriques web</a></li>
			</ul>			
		</li>	
		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="soutien.gif" alt="Soutien aux projets" />
			<ul id="smenu1">
				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">smenu11</a>
					<ul id="smenu11">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
				<li><a href="#">Glossaire</a></li>
				<li><a href="#">Conseil - Assistance</a></li>
				<li><a href="#">Equipe IS</a></li>
				<li><a href="#">Compétences</a></li>
				<li onmouseover="montre('smenu12',true);" onmouseout="montre('smenu12',false);"><a href="#">smenu12</a>
					<ul id="smenu12">
						<li><a href="#">Actualités</a></li>
						<li><a href="#">Groupe d'experts IS</a></li>
						<li><a href="#">Comité de pilotage IS</a></li>
						<li><a href="#">Bulletin d'informations</a></li>
						<li><a href="#">Colloques</a></li>
						<li><a href="#">Liens utiles</a></li>
						<li><a href="#">Glossaire</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>	
</div>	
</div>	
</body>
</html>

Code CSS :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
* {
margin:0px;
padding:0px;
background:#ffffff;
text-align:center;
}
 
body{
font-family:Arial, Helvetica, sans-serif;
}
 
img {
border:none;
}
 
a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
 
/*centre la page et donne la largeur pour une basse résolution*/
#centrer {
margin-left:auto;
margin-right:auto;
width:776px;
}
 
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:none;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
/*border:1px solid #dddddd;
border-top:none;*/
 
/*test*/
background:none;
/*test*/
 
top:22px;
left:0;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
 
/*test*/
border:1px solid #dddddd;
margin:1px 0px 1px 0px;*/
/*test*/
 
/*border-top:1px solid #dddddd;*/
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*carré déroulant sous-menu niveau 2 décalé sur la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*carré déroulant sous-menu niveau 2 tout à droite décalé sur la gauche*/
#menu ul li ul li ul.dernier {
left:-125px;
}
/****************************/
/* 	fin menu déroulant		*/
/****************************/

et enfin celui sur lequel je me suis fait c!*$@ comme rat mort avec des sibling par ci, des childNodes par là et ci et mi pour finalement faire un truc qui tiens en 3 lignes

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);	
	if (d && !affiche) d.style.display='none';
	else if (d && affiche)d.style.display = 'block';
}

Si tu veux supprimer les espaces entre les liens des sous-menu il faut que tu supprimes ce qu'il y a entre les commentaires /*test*/ dans le CSS et que tu remettes ce qui est en commentaire (sous IE il croit que tu sors de la liste donc tu ne peux avancer dans le menu mais tu dois le savoir puisque tu as essayé avec moi de régler ce problème (qui n'est toujours pas résolu d'ailleurs) mais en vain malheureusement donc si tu trouves comment faire balance l'info

) .

**Bisûnûrs** · 18/10/2006, 16h32

Je n'ai qu'une chose à dire :

Bien joué !

Depuis le temps que tu es dessus ...

**trotters213** · 18/10/2006, 16h40

Envoyé par BisounoursJos

JDepuis le temps que tu es dessus ...

Depuis lundi précisément, c'est pitoyable quand tu vois la solution, j'ai honte

**SpaceFrog** · 18/10/2006, 16h44

marche pas chez moi ... j'ai des soucis avec le onmouseout ... il sort direct du menu ...
et pas le mêm résultat sous IE et ffx ...

**trotters213** · 18/10/2006, 16h54

je sais c'est ce que je marque à la fin de mon message (il faut lire jusqu'au bout

)
Sous IE, il sort directement parce qu'il y a des espaces antre chaque sous-menu (c'est un problème que j'essaie de régler depuis quelques jours mais je n'y arrive pas) pas sous FF ni Opera.
Si tu en veux un qui marche il faut faire ça

Code CSS :

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
ul, li {
list-style-type:none;
}
 
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:right;
width:125px;
cursor:pointer;
display:block;
background:none;
height:22px;
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:125px;
border:1px solid #dddddd;
border-top:none;
top:22px;
left:0;
}
 
#menu ul li ul li {
height:100%;
}
 
#menu ul li ul li a {
color:#3399ff;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #dddddd;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#ffffff;
background:#3399ff;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:125px;
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}

Normalement celui-ci est nickel.

**SpaceFrog** · 18/10/2006, 17h10

ha ben voilà qui est mieux

**trotters213** · 18/10/2006, 17h26

ou pas

?

**FremyCompany** · 18/10/2006, 18h04

Envoyé par trotters213

ou pas

?

FAQ certainement pas... la FAQ répond à des questions sur le JS ou les fonctions du navigateurs... par contre ca pourrait rentrer dans la catégorie Codes Sources JavaScript...

Lol, tu peux toujours tenter ta chance en postant dans le post suivant : Page Code Source : mettez votre code ici

mais il y a peu de chance que ca passe dans l'imédiat (les responsables des FAQ Web-Dev ne s'attardent pas trop sur le JS)

**Kerod** · 18/10/2006, 19h06

Je dirais exactement la même chose pour la question FAQ.

La FAQ a pour but d'apporter une explication détaillé agrémenté de code le cas échéant sur un problème précis ou une question. D'où le nom de Q/R.

Mais ton code peut certainement être ajouter à la page Sources Javascript. Si tu souhaites le proposer fais le dans le thread donné plus haut.

Merci

**trotters213** · 19/10/2006, 08h41

merci, je vais donc le proposer au cas où ça puisse servir à quelqu'un un jour.

menu déroulant à 2 niveaux : pour ceux qui le veulent, il suffit de se servir

JavaScript

Discussions similaires

Partager

Partager