Affichage sous menu

**mars77** · 30/01/2010, 14h10

Bonjour,

J'ai un petit problème avec mon menu pour mon site.

Quand je clique sur un sous menu, la page s'affiche, mais mon sous menu se ferme.

Que je dois mettre pour que le sous menu reste ouvert'

Merci pour votre aide.

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
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
<script type="text/javascript" language="javascript">
	function disply(d){
	    //fermer tous
		switch(d)
		{
		case 'index' :    document.getElementById('mod_ges').style.display = "none";
							document.getElementById('trans').style.display = "none";
		  				   document.getElementById('titi').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break;
		  case 'mod_ges' : 
		  document.getElementById('index').style.display = "none";
 
		  				   document.getElementById('trans').style.display = "none";
		  				   document.getElementById('titi').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break;
		  case 'trans'    :document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
		  					document.getElementById('titi').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break; 
		  case 'titi'    : document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
		  			      document.getElementById('trans').style.display = "none";
		                   document.getElementById('analyse').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break; 
		  case 'analyse'   :document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
		                   document.getElementById('trans').style.display = "none";
						   document.getElementById('titi').style.display = "none";
						   document.getElementById('quitter').style.display = "none";
						   break;
		  case 'quitter' : document.getElementById('index').style.display = "none";
		  					document.getElementById('mod_ges').style.display = "none";
						   document.getElementById('trans').style.display = "none";
						   document.getElementById('titi').style.display = "none";
						   document.getElementById('analyse').style.display = "none";
						   break;
		}
 
		//*****************
		var aff = document.getElementById(d);
	    //aff.style.display = "";
		if(aff.style.display == ""){
		  aff.style.display = "none";
		}
		else{
		  aff.style.display = "";
		}
	}
</script>
<hr width="170" color="#FFFFFF" size="1" /><br />
<img src="./imgs/menu.jpg" class="img_menu"   onclick="disply('index');"/><br />
<div class="sous_menu" id="index" style=" display;" >
<img src="./imgs/arrow.gif"> <a href="index.php" class="mm3">Acceuil</a><br />
 
</div>
 
<img src="./imgs/menu.jpg" class="img_menu"   onclick="disply('mod_ges');"/><br />
<div class="sous_menu" id="mod_ges" style=" display: ;" >
<img src="./imgs/arrow.gif" ><a href="formation.php" class="mm3">Formation</a><br />
<img src="./imgs/arrow.gif"> <a href="niveau1.php">Niveau 1</a><br />
<img src="./imgs/arrow.gif"> <a href="niveau2.php">Niveau 2</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Examens</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Cours Théorique</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Perfectionnement</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Tarifs</a>
</div>
 
<img src="./imgs/biplace.jpg" class="img_menu"  onclick="disply('trans');" /><br />
<div class="sous_menu" id="trans" style=" display:none;">
<img src="./imgs/arrow.gif"> <a href="#">Biplace</a><br />
 
</div>
 
<img src="./imgs/information.jpg" class="img_menu"  onclick="disply('titi');" /><br />
<div class="sous_menu" id="titi" style=" display:none;">
<img src="./imgs/arrow.gif"> <a href="#">Matériel</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Occasions</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Renseignements</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Nous trouver</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Idée Cadeaux</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Météo</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Contact</a><br />
</div>
 
<img src="./imgs/galerie.jpg" class="img_menu"  onclick="disply('analyse');" /><br />
<div class="sous_menu" id="analyse" style=" display:none;">
<img src="./imgs/arrow.gif"> <a href="#">Galerie 1</a> <br />
 
</div>
 
<img src="./imgs/liens.jpg" class="img_menu"  onclick="disply('quitter');" /><br />
<div class="sous_menu" id="quitter" style=" display:none;">
<img src="imgs/arrow.gif"> <a href="#">Liens Météo</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Fabriquants</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Clubs</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Divers</a><br />
</div>
<br /><hr width="170" color="#FFFFFF" size="1" /><br />
  <script type="text/javascript">disply('index');</script>

**xess91** · 01/02/2010, 12h56

Salut,

J'ai modifié deux trois petit truc casiment rien, alors voila:

le javascript dans le head:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<head>
<script type="text/javascript" language="javascript">
function disply(d){
//fermer tous
switch(d)
{
case 'index' :  document.getElementById('mod_ges').style.display = "none";
				document.getElementById('trans').style.display = "none";
		  		document.getElementById('titi').style.display = "none";
		        document.getElementById('analyse').style.display = "none";
				document.getElementById('quitter').style.display = "none";
				break;
case 'mod_ges' : 	document.getElementById('index').style.display = "none";
		  			document.getElementById('trans').style.display = "none";
		  			document.getElementById('titi').style.display = "none";
		            document.getElementById('analyse').style.display = "none";
					document.getElementById('quitter').style.display = "none";
					break;
case 'trans':	document.getElementById('index').style.display = "none";
		  		document.getElementById('mod_ges').style.display = "none";
		  		document.getElementById('titi').style.display = "none";
		        document.getElementById('analyse').style.display = "none";
				document.getElementById('quitter').style.display = "none";
				break; 
case 'titi': 	document.getElementById('index').style.display = "none";
		  		document.getElementById('mod_ges').style.display = "none";
				document.getElementById('trans').style.display = "none";
		        document.getElementById('analyse').style.display = "none";
				document.getElementById('quitter').style.display = "none";
				break; 
case 'analyse':	document.getElementById('index').style.display = "none";
		  		document.getElementById('mod_ges').style.display = "none";
		        document.getElementById('trans').style.display = "none";
				document.getElementById('titi').style.display = "none";
				document.getElementById('quitter').style.display = "none";
				break;
case 'quitter': document.getElementById('index').style.display = "none";
		  		document.getElementById('mod_ges').style.display = "none";
				document.getElementById('trans').style.display = "none";
				document.getElementById('titi').style.display = "none";
				document.getElementById('analyse').style.display = "none";
				break;
}
//*****************j'ai enlever le else*****************//
var aff = document.getElementById(d);
if(aff.style.display == "none"){
aff.style.display = "";
}
}
</script>
</head>

Le code html, dans celui j'ai passé tout les éléments css "display" a "display: ;":

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
40
41
42
 
<hr width="170" color="#FFFFFF" size="1" /><br />
<img src="./imgs/menu.jpg" class="img_menu"   onclick="disply('index');"/><br />
<div class="sous_menu" id="index" style="display:;" >
<img src="./imgs/arrow.gif"><a href="index.php" class="mm3">Acceuil</a><br />
</div>
<img src="./imgs/menu.jpg" class="img_menu"   onclick="disply('mod_ges');"/><br />
<div class="sous_menu" id="mod_ges" style="display:;" >
<img src="./imgs/arrow.gif"><a href="formation.php" class="mm3">Formation</a><br />
<img src="./imgs/arrow.gif"><a href="niveau1.php">Niveau 1</a><br />
<img src="./imgs/arrow.gif"><a href="niveau2.php">Niveau 2</a><br />
<img src="./imgs/arrow.gif"><a href="#">Examens</a><br />
<img src="./imgs/arrow.gif"><a href="#">Cours Théorique</a><br />
<img src="./imgs/arrow.gif"><a href="#">Perfectionnement</a><br />
<img src="./imgs/arrow.gif"><a href="#">Tarifs</a>
</div>
<img src="./imgs/biplace.jpg" class="img_menu"  onclick="disply('trans');" /><br />
<div class="sous_menu" id="trans" style=" display:;">
<img src="./imgs/arrow.gif"><a href="#">Biplace</a><br />
</div>
<img src="./imgs/information.jpg" class="img_menu"  onclick="disply('titi');" /><br />
<div class="sous_menu" id="titi" style=" display:;">
<img src="./imgs/arrow.gif"> <a href="#">Matériel</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Occasions</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Renseignements</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Nous trouver</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Idée Cadeaux</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Météo</a><br />
<img src="./imgs/arrow.gif"> <a href="#">Contact</a><br />
</div>
<img src="./imgs/galerie.jpg" class="img_menu"  onclick="disply('analyse');" /><br />
<div class="sous_menu" id="analyse" style="display:;">
<img src="./imgs/arrow.gif"> <a href="#">Galerie 1</a> <br />
</div>
<img src="./imgs/liens.jpg" class="img_menu"  onclick="disply('quitter');" /><br />
<div class="sous_menu" id="quitter" style="display:;">
<img src="imgs/arrow.gif"> <a href="#">Liens Météo</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Fabriquants</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Clubs</a><br />
<img src="imgs/arrow.gif"> <a href="#">Liens Divers</a><br />
</div>
<br /><hr width="170" color="#FFFFFF" size="1" /><br />

Et pour le javascript contenu dans le corp de page j'ai rien modifié, il te faut juste remplasser 'index' par l'id de la div correspondand à la page sur laquelle se trouvent ton menu et ton javascript:

Code :

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

1
2
3
4
5
6
 
<script type="text/javascript">
<!--
disply('index');
-->
</script>

Le problème venait du else de ta fonction disply() et du fait que les display de tes blocs menu avaient en valeur none.

@+

Affichage sous menu

JavaScript

Discussions similaires

Partager

Partager