IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Affichage sous menu


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Septembre 2008
    Messages
    13
    Détails du profil
    Informations forums :
    Inscription : Septembre 2008
    Messages : 13
    Points : 11
    Points
    11
    Par défaut Affichage sous menu
    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>

  2. #2
    Membre habitué Avatar de xess91
    Homme Profil pro
    Inscrit en
    Octobre 2008
    Messages
    408
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 408
    Points : 193
    Points
    193
    Par défaut
    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.

    @+

Discussions similaires

  1. [eZ Publish] Problème réecriture d'URL et affichage sous-menu
    Par harmless dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 3
    Dernier message: 09/07/2012, 11h26
  2. [CS4] prb affichage sous menu
    Par marilou78 dans le forum Dreamweaver
    Réponses: 2
    Dernier message: 23/09/2009, 11h35
  3. Réponses: 2
    Dernier message: 02/09/2009, 11h03
  4. [XHTML 1.1] Problème affichage sous menu avec IE
    Par Icedarts dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 14/05/2009, 14h53
  5. Display un sous menu : affichage progressif des sous rubriq.
    Par sokette dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 27/12/2005, 16h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo