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 :

[JS] Menu, Sous-Menu, Sous-Sous-Menu, etc


Sujet :

JavaScript

  1. #1
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut [JS] Menu, Sous-Menu, Sous-Sous-Menu, etc
    Bonjour à tous,

    J'ai un little souci.

    Débutant en prog web je m'attaque à JS, j'essaye de faire un menu avec un sous menu , un sous sous menu ,... jusqu'à infinie enfin suivant les données de la base de données .

    Ces menus ainsi que leur sous menu doivent si possible apparaitre avec un effet genre slide, ils doivent se réroulés sur un même axe. c'est à dire verticalement.

    Voici une idée général mais je n'arrive pas à faire les sous-sous-menu

    Merci de m'aider

    Voici la démo dispo sur le net : http://css.developpez.com/galerie/demo/menus/verticalderoulant1/

    Voici les codes pour le menu ainsi que le sous menu du premier niveau :

    Partie HTML
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
         <title>Menu déroulant vertical sur clic</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	 <link rel="stylesheet" href="style.css" type="text/css" />
    	 <script type="text/javascript" src="functions.js"></script>
    </head>
    <body>
     
    <div id="menu">
    	<div class="menu" id="menu1" onclick="afficheMenu(this)">
    		<a href="#">Menu 1</a>
    	</div>
    	<div id="sousmenu1" style="display:none">
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 1.1</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 1.2</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 1.3</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 1.4</a>
    		</div>
    	</div>
     
    	<div class="menu" id="menu2" onclick="afficheMenu(this)">
    		<a href="#">Menu 2</a>
    	</div>
    	<div id="sousmenu2" style="display:none">
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 2.1</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 2.2</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 2.3</a>
    		</div>
    	</div>
     
    	<div class="menu" id="menu3" onclick="afficheMenu(this)">
    		<a href="#">Menu 3</a>
    	</div>
     
    	<div class="menu" id="menu4" onclick="afficheMenu(this)">
    		<a href="#">Menu 4</a>
    	</div>
    	<div id="sousmenu4" style="display:none">
    		<div class="sousmenu">
    			<a href="#" >Sous-Menu 4.1</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 4.2</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 4.3</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 4.4</a>
    		</div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 4.5</a>
    		</div>
    	</div>
    </div>
     
    </body>
    </html>

    Partie CSS
    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
    *{
    	margin:0;
    	padding:0;
    }
    #menu{
    	width:150px;
    	margin:20px auto 0 auto;
    }
    .menu, .sousmenu{
    	text-align:center;
    }
    .menu{
    	height:18px;
    	width:150px;
    	padding:2px 0;
    	background:#404040;
    	color:#fff;
    }
    .sousmenu{
    	height:18px;
    	width:150px;
    	padding:1px 0;
    	background:#808080;
    	color:#fff;
    }
    .menu a{
    	display:block;
    	width:100%;
    	height:100%;
    	color:#fff;
    	font-family:arial,sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	text-decoration:none;
    	background:#404040;
    }
    .sousmenu a{
    	display:block;
    	width:100%;
    	height:100%;
    	color:#fff;
    	font-family:arial,sans-serif;
    	font-size:12px;
    	font-weight:bold;
    	text-decoration:none;
    	background:#808080;
    }
    .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
    	background:#ca0008;
    }

    Et enfin partie "Slide" ou plutôt JS
    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
     
    function afficheMenu(obj){
     
    	var idMenu     = obj.id;
    	var idSousMenu = 'sous' + idMenu;
    	var sousMenu   = document.getElementById(idSousMenu);
     
    	/*****************************************************/
    	/**	on cache tous les sous-menus pour n'afficher    **/
    	/** que celui dont le menu correspondant est cliqué **/
    	/** où 4 correspond au nombre de sous-menus         **/
    	/*****************************************************/
    	for(var i = 1; i <= 4; i++){
    		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
    			document.getElementById('sousmenu' + i).style.display = "none";
    		}
    	}
     
    	if(sousMenu){
    		//alert(sousMenu.style.display);
    		if(sousMenu.style.display == "block"){
    			sousMenu.style.display = "none";
    		}
    		else{
    			sousMenu.style.display = "block";
    		}
    	}
     
    }
    J'attend vos réponses avec impatience
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : janvier 2007
    Messages : 13 474
    Points : 36 602
    Points
    36 602
    Par défaut
    Bonjour,
    quel est ton problème avec les sous-sous-menus ?

    Il n'y en a pas dans ta version actuelle (seulement 2 niveaux) ...

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  3. #3
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut Réponse
    Tout d'abord merci d'avoir répondu si vite

    C'est bien ça le problème ...

    Je n'arrive pas à créer un niveaux 3 ...


    Sachant que le Niveaux 3 lorsqu'il s'ouvre il doit laisser le niveau 2 ouvert ...

    [Test effectué] J'arrive à ouvrir mon niveau 3 mais lorsqu'il s'ouvre mon niveau 2 se ferme mais cette version je ne l'ai pas mise car au moins vous pouvez partir sur quelque chose qui marche ...

    Cordialement
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  4. #4
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : janvier 2007
    Messages : 13 474
    Points : 36 602
    Points
    36 602
    Par défaut
    Citation Envoyé par Epica84 Voir le message
    J'arrive à ouvrir mon niveau 3 mais lorsqu'il s'ouvre mon niveau 2 se ferme mais cette version je ne l'ai pas mise car au moins vous pouvez partir sur quelque chose qui marche ...
    Ben justement c'est cette version qu'il nous faudrait
    Ça permettrait de partir de ce que tu as fais toi et de régler les problèmes que tu rencontres ...

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  5. #5
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut Correction du test effectué
    Merci encore de répôndre si vite

    Pour le niveau 3 je suis passer par un iframes

    Ce n'est pas du tout correct ...

    Et après j'ai fait du bidouillage

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    <script>
    				function resize() {document.getElementById("subsubmenu" ).height=0;
     
    	}
    				</script>
     
    ......
    ......
    ......
    ......
    ......
     
    <iframe id="subsubmenu" src="mysubsubmenu" scrolling="no" frameborder="0"></iframe>
    Donc comme vous pouvez le voir c'est du bidouillage et de plus lorsque je l'intégre à mon projet il marche pas

    d'où l'utilité de passer par une page test que j'ai fait et que vous pouvez voir plus haut



    Cordialement
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  6. #6
    Expert éminent sénior

    Homme Profil pro
    Inscrit en
    janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : janvier 2007
    Messages : 13 474
    Points : 36 602
    Points
    36 602
    Par défaut
    Ben réessaye en conservant la même logique que pour les 2 premiers niveaux
    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
    <div id="menu">
    	<div class="menu" id="menu1" onclick="afficheMenu(this)">
    		<a href="#">Menu 1</a>
    	</div>
    	<div id="sousmenu1" style="display:none">
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 1.1</a>
    		</div>
    		<div id="soussousmenu1_1" class="sousmenu">
    		         <div class="soussousmenu">
    			         <a href="#">Sous-Sous-Menu 1.1.1</a>
    		         </div>
    		         <div class="soussousmenu">
    			         <a href="#">Sous-Sous-Menu 1.1.2</a>
    		         </div>
                    </div>
    		<div class="sousmenu">
    			<a href="#">Sous-Menu 1.2</a>
    		</div>
    Ça devrait mieux coller à l'existant

    A+
    Pour tout savoir sur l'utilisation du forum

    En postant votre message, n'oubliez pas les Règles du Club.

  7. #7
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut Après test ...
    Bonjour ,

    Je relance le sujet et pour cause mon sous-sous menu ne marche toujours pas j'ai garder pourtant la même logique mais je dois avoir un souci au niveau du JS ... Car le CSS me semble correct

    Merci d'avance
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

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

    Informations forums :
    Inscription : avril 2004
    Messages : 7 441
    Points : 10 534
    Points
    10 534
    Par défaut
    bonjour,

    le lien vers l'exemple est mort....

  9. #9
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut Remplacement liens
    Bonjour, et voici le liens vers le menus déroulant je vais le modifié en haut aussi
    http://css.developpez.com/galerie/de...calderoulant1/
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  10. #10
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    En faite, pour être plus précis mon sous-sous-menus doit apparaitre en vertical d'où mon souci ...
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

Discussions similaires

  1. Menu déroulant, non déroulant sous IE :@
    Par PuppeT mAsTer dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 14/06/2006, 11h24
  2. Ajouter des sous-menus a un menu
    Par avogadro dans le forum Delphi
    Réponses: 9
    Dernier message: 08/06/2006, 15h03
  3. Menu dynamique qui passe sous un select
    Par krolineeee dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 30/05/2006, 17h00
  4. 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
  5. Menu principal et click sous menu
    Par angiosfr dans le forum Agents de placement/Fenêtres
    Réponses: 3
    Dernier message: 22/11/2005, 21h38

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