[HTML] Menu déroulant

Version imprimable

06/12/2006, 11h45
morgiane

[HTML] Menu déroulant

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,
06/12/2006, 11h56
wouaren

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

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

Code:

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

06/12/2006, 14h27
morgiane

ça marche pas ! :? Y a-t-il quelque chose à modifier au niveau de l'appel de la fonction ?

Code:

<a onClick="javascript: ShowHide(sm1)">
06/12/2006, 14h41
Matthieu2000

Citation:

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

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:

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:

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

06/12/2006, 15h05
Matthieu2000

Citation:

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';
}
}

savais bien que j'ai une faute :aie:
06/12/2006, 15h24
morgiane

:mrgreen: :mrgreen: :mrgreen: Ca marche !!!! Merci beaucoup !!!!
14/04/2007, 14h08
[nu]

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... 8O