[HTML] Menu déroulant

**morgiane** · 06/12/2006, 11h45

Bonjour,

J'ai fais un menu déroulant vertical. Quand je clique, sur l'élément 1 du menu, le sous-menu 1 apparait. Mais si je clique sur l'élément 2, le sous-menu 2 apparait, mais le sous-menu 1 reste aussi. Est-il possible de refermer le sous-menu 1 ? J'ai fais pas mal de recherche, mais je ne trouve rien là-dessus (et le lien vers les tutoriaux ne fonctionne pas pour le moment).
Petite précision : c'est un simple menu html avec appel de fonction javascript (pas de css ou autre !!!!)

Merci d'avance pour toutes vos réponses et bonne continuation à tous,

**wouaren** · 06/12/2006, 11h56

oui, surement tout est possible !
il faudrait faire un onclick="deroule(sous_menus);close(all_but_sous_menus2)"

enfin dans ce style, envoit l'adresse de ton script on pourra plus t'aider

**morgiane** · 06/12/2006, 12h10

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
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<script language="JavaScript" type="text/JavaScript">
<!-- 
function ShowHide(Div) { 
   if (Div.style.display=='none') { 
     Div.style.display='block'; 
    } 
    else { 
     Div.style.display='none'; 
    } 
  } 
</script>
</head>
<body>
<a onClick="javascript: ShowHide(sm1)"><b>Menu 1</b></a><br>
          <div id="sm1" style="display: none">
		  sous-menu 10<br>
		  sous-menu 11<br>
		  sous-menu 12<br>
		  </div>
<a onClick="javascript: ShowHide(sm2)"><b>Menu 2</b></a><br>
          <div id="sm2" style="display: none">
		  sous-menu 20<br>
		  sous-menu 21<br>
		  </div>
<a onClick="javascript: ShowHide(sm3)"><b>Menu 3</b></a><br>
          <div id="sm3" style="display: none">
		  sous-menu 30<br>
		  sous-menu 31<br>
		  sous-menu 32<br>
		  sous-menu 33
		  </div>
</body>
</html>

Merci pour la réponse si rapide

!

**Matthieu2000** · 06/12/2006, 13h59

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
function ShowHide(id) { 
 
for(i=1;i<4;i++){
calque=document.getElementById("sm"+i);
if( ("sm"+i)==id){
   if (calque.style.display=='none') { 
     calque.style.display='block'; 
    } 
    else { 
     calque.style.display='none'; 
    } 
  } 
} else{
calque.style.display='none'; 
}
}

à quelques fautes près...

**morgiane** · 06/12/2006, 14h27

ça marche pas !

Y a-t-il quelque chose à modifier au niveau de l'appel de la fonction ?

Code :

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

<a onClick="javascript: ShowHide(sm1)">

**Matthieu2000** · 06/12/2006, 14h41

**morgiane** · 06/12/2006, 14h50

Merci beaucoup de bien vouloir m'aider, mais ça pose toujours problème ! J'ai regardé côté accolades et y'avait un petit problème au niveau du deuxième else, et sinon, ben actuellement, il n'ouvre que le sous-menu 3 et encore, il ne le referme pas !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ShowHide(id) { 
	for(i=1;i<4;i++){
		calque=document.getElementById(id);
		if(("sm"+i)==id){
			if (calque.style.display=='none') { 
				calque.style.display='block'; 
			} else { 
				calque.style.display='none'; 
			} 
		} else {
			calque.style.display='none'; 
		}
	}
}

et j'ai bien les '' pour l'appel de mes fonctions :

Code :

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

1
2
3
4
5
6
7
<a onClick="javascript: ShowHide('sm1')"><b>Menu 1</b></a><br>
          <div id="sm1" style="display: none">
		  sous-menu 10<br>
		  sous-menu 11<br>
		  sous-menu 12<br>
		  </div>
...

Désolée de vous embêter

!

**Matthieu2000** · 06/12/2006, 15h05

savais bien que j'ai une faute

**morgiane** · 06/12/2006, 15h24

Ca marche !!!! Merci beaucoup !!!!

**[nu]** · 14/04/2007, 14h08

Juste pour vous souligner un détail...
cette procédure est "dangereuse" puisqu'elle appelle à l'inverse de ce qui est affiché en prenant pour acquis que tout est solide mais on est donc pas à l'abris d'allumer 2 menus simultanément, et d'en suite être pris dans une boucle où les menus ne s'effacent plus...

[HTML] Menu déroulant

JavaScript

Discussions similaires

Partager

Partager