Affichage sous menu

Eléphant du PHP | 121 Messages

30 janv. 2010, 15:05

Bonjour à tous,

J'ai créé un menu pour mon site selon l'exemple ci-dessous.
<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>
Mon problème c'est quand j'affiche le menu 2 et que je clique sur un sous menu, la page s'affiche mais ferme le sous menu.

Comme faire pour que quand je clique sur le sous menu il affiche la page et que le sous menu reste ouvert?

Merci pour votre aide.

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

11 févr. 2010, 14:59

Salut,
c'est quoi "menu 2", "sous menu" ?
un exemple en ligne ?

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute