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


Sujet :

JavaScript

  1. #1
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut menu déroulant
    Bonjour a tous voilà je rencontre actuellement un problème avec mon menu déroulant, en effet ce n'est pas très esthétique, mon menu se déroule a chaque chargement de page alors que normalement il ne devrait se dérouler que lorsque l'on clic sur le menu.
    Voici ma fonction javascript qui gère ce menu déroulant:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    window.onload=montre;
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    Vous pouvez vous rendre compte du problème ici
    Je voudrais que le menu se déroule seulement si l'on clic sur l'un des boutons en haut et non a chaque chargement de page.
    En vous remerciant Amicalement.

  2. #2
    Membre expérimenté
    Avatar de jbrasselet
    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Mars 2006
    Messages
    1 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 022
    Points : 1 413
    Points
    1 413
    Par défaut
    tu le lance à chaque fois que ta page se charge c'est normal.
    Il faut que ta fonction montre soit appelée sur un onclick

  3. #3
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    Donc je l'ai remplacer par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    window.onclick=montre;
    Et ça ne change rien .

  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 571
    Points
    36 571
    Par défaut
    Bonjour,
    Citation Envoyé par Tchupa Voir le message
    Donc je l'ai remplacer par
    pas "remplacer", mais "enlever"

    A+

  5. #5
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    la ligne?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    window.onclick:montre;
    ?
    Je ne vous suis pas désolé.
    Amicalement Tchupa.

  6. #6
    Membre expérimenté
    Avatar de jbrasselet
    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Mars 2006
    Messages
    1 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 022
    Points : 1 413
    Points
    1 413
    Par défaut
    Tu veux qu'il apparaisse lorsque tu clique sur quoi? C'est sur cet objet que tu dois mettre le onclick

  7. #7
    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 571
    Points
    36 571
    Par défaut
    Citation Envoyé par jbrasselet qui aurait dû dire Voir le message
    tu le lance à chaque fois que ta page se charge c'est normal.
    Il faut que ta fonction montre soit appelée sur un onclick uniquement (et pas sur onload)

  8. #8
    Membre expérimenté
    Avatar de jbrasselet
    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Mars 2006
    Messages
    1 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 022
    Points : 1 413
    Points
    1 413
    Par défaut
    Merci de préciser ma pensée

  9. #9
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    A votre qu'est ce qui est le plus ergonomique pour vous?
    Que le menu se déroule au clic ou au passage de la souris?

    Donc comme je disais ma fonction java:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    Donc je retire le onload

    Et voila par exemple à quoi ressemble un bouton avec son sous menu
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <ul id="menu">
                        <li onclick="javascript:montre();"><a href="index.php?p=news"><img src="images/index_06.gif" alt="" /></a></li> 
                        <!-- Bouton acceuil-->
                        <li><a href=""><img src="images/index_07.gif" alt="" /></a></li> 
                        <!-- séparateur-->
                        <li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif" /> <!-- Bouton tarif-->
    					<ul id="smenu2">
    					<li><a href="index.php?p=tarif&typ=permisB">Permis Voiture</a></li>
    					<li><a href="index.php?p=tarif&typ=permisA">Permis Moto</a></li>
    					<li><a href="index.php?p=tarif&typ=BSR">Permis BSR</a></li>
    					<li><a href="index.php?p=tarif&typ=ConduiteAccompagnee">Conduite Accompagnée</a></li>
    					</ul>

  10. #10
    Membre expérimenté
    Avatar de jbrasselet
    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    Mars 2006
    Messages
    1 022
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2006
    Messages : 1 022
    Points : 1 413
    Points
    1 413
    Par défaut
    Je pense que sur le clic c'est le mieux, enfin je préfères.

    J'aime pas voir des trucs apparaitre et disparaitre dès que je bouge la souris

  11. #11
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    J'ai le code tel que je vous le présente dans mon poste précédent seulement si vous actualisé la page tout les menu se déroule encore et si on clic a nouveau sur un bouton il se replie pas
    De plus j'ai remarqué , que j'ai le même soucis lorsque l'on clic sur un bouton qui n'a pas de sous menu c'est comme si on actualiser la page tout les sous-menu se déroule.

  12. #12
    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 571
    Points
    36 571
    Par défaut
    Citation Envoyé par Tchupa Voir le message
    si vous actualisé la page tout les menu se déroule encore
    Plus exactement : ils s'affichent
    => initialise leur display à "none"
    et si on clic a nouveau sur un bouton il se replie pas
    Idem que précédemment ...
    De plus j'ai remarqué , que j'ai le même soucis lorsque l'on clic sur un bouton qui n'a pas de sous menu c'est comme si on actualiser la page tout les sous-menu se déroule.
    Normal : enlève les balises <A> autour de ces images ...

    A+

  13. #13
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    Plus exactement : ils s'affichent
    => initialise leur display à "none"
    Idem que précédemment ...
    Normal : enlève les balises <A> autour de ces images ...

    A+
    Si je retires les balise <a> y'aura plus les liens non ?

  14. #14
    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 571
    Points
    36 571
    Par défaut
    Citation Envoyé par Tchupa Voir le message
    Si je retires les balise <a> y'aura plus les liens non ?
    Si tu parles des liens de ce type
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <li><a href=""><img src="images/index_07.gif" alt="" /></a></li>
    ils ne manqueront à personne, si ?

    A+

  15. #15
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    Si tu parles des liens de ce type
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <li><a href=""><img src="images/index_07.gif" alt="" /></a></li>
    ils ne manqueront à personne, si ?

    A+
    Oui effectivement mais ça c'est l'image qui sépare les boutons il n'y a rien dessus.
    Ensuite j'ai mis le diplay:none; dans mon css et là le menu se déroule plus du tout.

  16. #16
    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 571
    Points
    36 571
    Par défaut
    Citation Envoyé par Tchupa Voir le message
    Oui effectivement mais ça c'est l'image qui sépare les boutons il n'y a rien dessus.
    Alors desquels parles-tu ?
    Ensuite j'ai mis le diplay:none; dans mon css et là le menu se déroule plus du tout.

    Pourtant ça semble être le fonctionnement prévu : la fonction repasse le display à "block" pour le menu à afficher ...
    On peut voir tes adaptations ?

    A+

  17. #17
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    Oui biensur , voici mon 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
    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
     
     
    body {
    background : #000000 url(images/font.png) no-repeat top center;
    width : 1004px;
    height : 1354px;
    margin : auto;
    }
    #header {
    width : 796px;
    min-height : 1338px;
    background : #ffffff;
    margin : auto;
    }
    #banner {
    width : 796px;
    height : 174px;
    background : url(images/index_05.gif) no-repeat top center;
    margin-top : 15px;
    }
    #menu {
    display : block;
    background-image : url(images/index_06.gif);
    list-style-type : none;
    width : 796px;
    height : 20px;
    margin : 0;
    padding : 0;
    }
    #menu li {
    list-style-type : none;
    float : left;
    background-image : url(images/menu-font.png);
    height : 20px;
    text-decoration : none;
    color : blue;
     
    }
    #menu li ul {
    position : absolute;
    width : 150px;
    height : 20px;
    }
    #menu li ul li {
    float : left;
    width : 150px;
    height : 20px;
    display:none;
     
    }
    #menu li a:hover, #menu dt a:hover {
    background-image : url(images/menu-font.png);
    color : #0099ff;
    text-decoration : none;
    font-family : Times New Roman, Times, serif;
    font-size : 14px;
    float : left;
     
    }
    input {
    border : 1px solid #2d9bc0;
    }
    .submit {
    background-color : white;
    border : 2px solid #2d9bc0;
    font-weight : bold;
    }
    .submit:hover {
    background-color : #c1dbf4;
    border : 2px solid #2d9bc0;
    }
    a:visited {
    color : blue;
    }
    a img {
    border : 0;
    display : block;
    }
    celui de mon index.

    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
     
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		        <style type="text/css" media="screen">
                    @import url("./design.css"); <!-- permet d'appeler le css -->
    				</style>
     
    				<script type="text/javascript">
    <!--
     
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display='block';}
    }
    //-->
    </script>
     
         </head>
         <body>
              <div id="header">   
                   <div id="banner"></div>
                   <ul id="menu">
                        <li onclick="javascript:montre();"><a href="index.php?p=news"><img src="images/index_06.gif" alt="" /></a></li> 
                        <!-- Bouton acceuil-->
                        <li><a href=""><img src="images/index_07.gif" alt="" /></a></li> 
                        <!-- séparateur-->
                        <li onclick="javascript:montre('smenu2');"><img src="images/index_08.gif" alt="Tarif" /> <!-- Bouton tarif-->
    					<ul id="smenu2">
    					<li><a href="index.php?p=tarif&typ=permisB">Permis Voiture</a></li>
    					<li><a href="index.php?p=tarif&typ=permisA">Permis Moto</a></li>
    					<li><a href="index.php?p=tarif&typ=BSR">Permis BSR</a></li>
    					<li><a href="index.php?p=tarif&typ=ConduiteAccompagnee">Conduite Accompagnée</a></li>
    					</ul>
    					</li>
                        <li><a href=""><img src="images/index_09.gif" alt="" /></a></li> 
                        <!-- séparateur-->
    					<li onclick="javascript:montre('smenu3');"><img src="images/index_10.gif" alt="Code" /> <!-- Bouton code-->
    						<ul id="smenu3">
    						<li><a href="index.php?p=code&ville=Hautmont">Horaire de cours</a></li>
    						</ul>
    				 </li>
    					<li><a href=""><img src="images/index_11.gif" alt="" /></a></li> 
    					<!-- séparateur-->
    					<li onclick="javascript:montre('smenu4');"><img src="images/index_12.gif" alt="Permis" /> <!-- Bouton permis-->
    						<ul id="smenu4">
    						<li><a href="index.php?p=permis1">Permis A</a></li>
    						<li><a href="index.php?p=permis">Permis B</a></li>
    						<li><a href="index.php?p=permis3">Permis BSR</a></li>
    						<li><a href="index.php?p=permis2">Conduite Accompagnée</a></li>
    						</ul>
    				 </li>
    					<li><a href=""><img src="images/index_13.gif" alt="" /></a></li> 
    					<!-- séparateur-->
    					<li><a href="index.php?p=galerie"><img src="images/index_14.gif" alt="Photo" /></a></li> 
    					<!-- Bouton photo-->
     
    					<li><a href=""><img src="images/index_15.gif" alt="" /></a></li> 
    					<!-- séparateur-->
    					<li onclick="javascript:montre('smenu5');"><a href="index.php?p=statistiques"><img src="images/index_16.gif" alt="Stats" /></a> <!-- Bouton stats-->
     
    					<li><a href=""><img src="images/index_17.gif" alt="" /></a></li> 
    					<!-- séparateur-->
    					<li onclick="javascript:montre('smenu6');"><img src="images/index_18.gif" alt="Contact" /> <!-- Bouton contact-->
    						<ul id="smenu6">
    						<li><a href="index.php?p=contact3">Contacter auto-ecole</a></li>
    						<li><a href="index.php?p=contact">Contacter webmaster</a></li>
    						</ul>
    				 </li>
    			</ul>

  18. #18
    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 571
    Points
    36 571
    Par défaut
    Ca serait pas plutôtque tu dois passer en display:none ?

    A+

  19. #19
    Membre du Club Avatar de Tchupa
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2007
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2007
    Messages : 98
    Points : 59
    Points
    59
    Par défaut
    Ok impeccable maintenant, je voudrais savoir encore une chose comment je dois faire pour lorsque le visiteur re clique sur le menu qui vient de dérouler pour qu'il se ré enroule?

  20. #20
    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 571
    Points
    36 571
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function montre(id) {
    var d = document.getElementById(id);
    	for (var i = 1; i<=10; i++) {
    		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    	}
    if (d) {d.style.display=(d.style.display=='none')?'block':'none';}
    }
    A+

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. recuperation valeur menu déroulant
    Par jerome1 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 08/06/2005, 11h39
  2. [menu]faire un menu déroulant
    Par Nadine dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 24/03/2005, 08h33
  3. Dimensions d'un Menu déroulant
    Par polo-j dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 11/02/2005, 14h26
  4. Menu déroulant valeur par défaut
    Par Gourouni dans le forum ASP
    Réponses: 11
    Dernier message: 06/12/2004, 16h31
  5. Menu déroulant suite au passage sur un TMenuItem
    Par James_ dans le forum C++Builder
    Réponses: 2
    Dernier message: 05/05/2004, 14h31

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