Menu déroulant.

Eléphant du PHP | 121 Messages

30 janv. 2010, 23:04

Bonsoir à tous,

J'ai créé un menu déroulant pour mon site et j'ai un petit souci.

Quand je cliques sur un sous menu il m'affiche la page sans problème, mais mon menu se referme. J'aimerai qu'il reste ouvert.
<div style="width:190px;">
 
  <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;" >
<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 />
  <script type="text/javascript">disply('index');</script>
  </div>
body
  {
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	font-family:Verdana, Arial;
	font-size:12px;
	background-color: #666;
	text-decoration: none;
  }
  
a:link
  {
	font-weight:bold;
	font-size:12px;
	color:#333;
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
  }
  
a:hover
  {
	font-weight:bold;
	font-size:12px;
	color:#333;
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
  }
 a:visited
  {
	font-weight:bold;
	font-size:12px;
	color:#333;
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
  }
  a:active {
	font-weight:bold;
	font-size:12px;
	color:#333;
	text-decoration:none;
	font-family: Verdana, Geneva, sans-serif;
}
   
   
h2
  {
    font-size:12px;
	font-weight:bold;
	color:#999999;
	margin:0px 0px 0px 0px;
  }
  
form
  {
    margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
  }
  
.menu_prince 
  {
    font-size:18px; 
	width:190px; 
	height:550px;
	float:left; 
	color:#0033FF; 
	padding-top:20px;
	margin:0px 0px 0px 0px;
	background:url(./imgs/logo.png) no-repeat; 

  }
  
.sous_menu
  {
	background:#D8FBDB;
	width:145px;
	border:1px solid #007423;
	padding:5px 5px 5px 5px;
	margin-left:15px;
	font-size: 12px;
	color: #00F;
	text-decoration: none;
	font-family: Verdana, Geneva, sans-serif;

  }
  
.img_menu
  { 
    cursor:pointer;
	margin-left:5px;
J'ai essayé plein de chose mais je ne trouve pas .

Merci pour votre aide

}[/php]

ViPHP
ViPHP | 1996 Messages

31 janv. 2010, 13:26

Un menu déroulant qui reste ouvert comme si on simulait un clic?
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphant du PHP | 121 Messages

31 janv. 2010, 13:57

Je vais te donner un exemple.
Voilà mon menu lors de ma page d'accueil:

menu 1
menu 2
menu3
menu 4

Quand je clique sur menu 1 il m' affiche les sous menus du menu 1.
menu 1
sous menu1 page 1
sous menu1 page 2
sous menu1 page 3
menu 2
menu3
menu 4


Ce que je voudrai avoir, c'est que quand je clique sur un des liens sous menu 1 il affiche la nouvelle page mais aussi que le menu 1 et les sous menu 1 son affiché.
menu 1
sous menu1 page 1
sous menu1 page 2
sous menu1 page 3
menu 2
menu3
menu 4

Merci pour ton aide

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

31 janv. 2010, 15:41

Le plus simple est sans doute, au chargement de ta page, de faire un appel javascript à ta fonction disply(), en spécifiant en argument le nom du menu dans laquelle la page se trouve.

Actuellement tu fais :
<script type="text/javascript">disply('index');</script>
Ceci affiche ton menu index. Il te suffit donc de déterminer grâce à php la valeur à spécifier et générer le code javascript pour ouvrir par exemple le menu "titi" :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphant du PHP | 121 Messages

31 janv. 2010, 19:16

Hello,

Merci pour ton aide.

Il fallait simplement comme tu me l'a expliqué mettre :
<script type="text/javascript">disply('index');</script>
dans chaques pages .

Maintenant cela fonctionne nickel.

Merci encore .