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 :

Menu déroulant vertical


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Inscrit en
    Février 2006
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 217
    Points : 90
    Points
    90
    Par défaut Menu déroulant vertical
    Bonjour!

    J'essaie de faire un menu vertical, avec déroulement sur la droite un peu comme ICI, mais sur 3 niveaux

    Voici mon code

    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
     
     
    <div class="menu" id="menu7" onmouseover="affiche(this)" onmouseout="affiche2(this)">
    	   <a href="#">Carterie</a>
    	     <div class="sousmenu" id="sousmenu7" style="display:none" onmouseover="affiche(this)" onmouseout="affiche2(this)">
    			  <div><a href="#">Carte postale</a></div>
     
    			        <div class="soussousmenu" id="soussousmenu7" style="display:none" onmouseover="affiche(this)" onmouseout="affiche3(this)">
    			           <div><a href="#">Villes et Régions</a></div>
    					   <div><a href="#">Anniversaire</a></div>
    					   <div><a href="#">Fin d'Année</a></div>
    					   <div><a href="#">Sans voeux</a></div>					   
    				   </div>	   
     
    			  <div><a href="#">Carnet double</a></div>	
     
                                                     <div class="soussousmenu" id="soussousmenu8" style="display:none" onmouseover="affiche(this)" onmouseout="affiche3(this)">
    			           <div><a href="#">Fin d'Année</a></div>
    					   <div><a href="#">Anniversaire</a></div>
    					   <div><a href="#">Mariage</a></div>
    					   <div><a href="#">Naissance</a></div>
    					   <div><a href="#">Retraite</a></div>
    					   <div><a href="#">Condoléance</a></div>
    					   <div><a href="#">Merci</a></div>
    					   <div><a href="#">Sans voeux</a></div>
    					   <div><a href="#">Prompt Rétablissement</a></div>
    				   </div>			
    		</div>
    	</div>
    Et voici le javacript:

    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
     
    function affiche(obj){
    	var id = obj.id;
     
    	for(var i = 1; i <= 4; i++){
    		document.getElementById('sousmenu'+i).style.display = "none";
    	}
     
    	if(document.getElementById('sous'+id)){
    		document.getElementById('sous'+id).style.display = "block";
    	}
    }
     
    function affiche2(obj){
    	var id = obj.id;
     
    	for(var i = 1; i <= 4; i++){
    		document.getElementById('sousmenu'+i).style.display = "none";
    	}
     
    	if(document.getElementById('sous'+id)){
    		document.getElementById('sous'+id).style.display = "none";
    	}
    }
     
    function affiche3(obj){
    	var id = obj.id;
     
    	for(var i = 1; i <= 8; i++){
    		document.getElementById('soussousmenu'+i).style.display = "block";
    	}
     
    	if(document.getElementById('sous'+id)){
    		document.getElementById('sous'+id).style.display = "block";
    	}
    }
    Cela fonctionne pour les "cartes postales", mais pas pour les "carnets doubles"!

    Pourquoi?

    Merci!

  2. #2
    Membre émérite
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Points : 2 814
    Points
    2 814
    Par défaut
    id="soussousmenu8"
    est mal placé!

  3. #3
    Membre régulier
    Homme Profil pro
    Inscrit en
    Février 2006
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 217
    Points : 90
    Points
    90
    Par défaut
    Comment ça?

  4. #4
    Membre émérite
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Points : 2 814
    Points
    2 814
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="soussousmenu" id="sousmenu8" style="display:none" onmouseover="affiche(this)" onmouseout="affiche3(this)">
     
    <div id="soussousmenu8" >

  5. #5
    Membre régulier
    Homme Profil pro
    Inscrit en
    Février 2006
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 217
    Points : 90
    Points
    90
    Par défaut
    Et bien en fait "carnet double" et "cartes postales" affichent la même chose !

    Si cela marche pour soussousmenu7, pourquoi pas pour le 8 ?

  6. #6
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 651
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 651
    Points : 11 145
    Points
    11 145
    Par défaut
    bonjour,

    à l'origine ce menu n'est pas conçu pour plusieurs niveaux... Je l'ai volontairement limité à 1 niveau (à cause de la gestion des événements qui devenait délicate).

  7. #7
    Membre régulier
    Homme Profil pro
    Inscrit en
    Février 2006
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 217
    Points : 90
    Points
    90
    Par défaut
    C'est bon!

    J'ai joué des coudes, mais cela fonctionne, en créant de nouvelles fonctions spécialement pour chaque parties du troisième niveau...

    Cela fait un peu code brouillon, mais bon...

    Merci à tous!

  8. #8
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 651
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 651
    Points : 11 145
    Points
    11 145
    Par défaut
    Citation Envoyé par snaxisnake Voir le message
    C'est bon!

    J'ai joué des coudes, mais cela fonctionne, en créant de nouvelles fonctions spécialement pour chaque parties du troisième niveau...
    il faudra que tu nous dises comment tu as fait

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu Déroulant vertical
    Par Ania dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 12/12/2006, 14h14
  2. Problème menu déroulant vertical
    Par barbapapa2 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 31/10/2006, 12h28
  3. Menu déroulant vertical en cascade vertical
    Par Ania dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 28/08/2006, 17h46
  4. Problème menu déroulant vertical
    Par zoidy dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 23/05/2006, 14h57

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