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 :

Cacher et montrer un sous-menu


Sujet :

JavaScript

  1. #1
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut Cacher et montrer un sous-menu
    Bonjour à tous,

    J'ai avancé depuis mon premier post sur ce forum.
    Mon menu fonctionne et quand on clique sur un élément du menu ou des sous-menus, le libellé apparait bien dans la cellule de tableau située sous le menu. Et, s'il y a un sous-menu, celui-ci est caché pour que la cellule ne soit pas masquée.

    Ces opérations sont effectuées par la fonction suivante :
    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
    function liClic(id, cell)
    {
      document.getElementById(cell).innerHTML=id.innerHTML;
      document.getElementById(cell).style.visibility = "visible";
      document.getElementById(cell).className = "bordure";
     
      var ulVal = getAncestorByTagName(id, 'ul');
      if (ulVal.id != "css3menu1")  //  différent de (<>) ou Not se code !=
      {
        if (ulVal.display =="none" || ulVal.display =="")
        {
    	ulVal.style.display = "block"
        }
        else
        {
    	ulVal.style.display = "none"
        }
      }
    }
    Cette fonction est appelée par le code html qui suit
    Code html : 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
    <ul id="css3menu1" class="topmenu">
      <li><a onclick="liClic(this,'MusClasCell')" class="toproot"><span>la musique classique</span></a>
        <ul id="MusClassUl">
          <li><a onclick="liClic(this,'MusClasCell')">symphonique</a></li>
          <li><a onclick="liClic(this,'MusClasCell')">concertiste</a></li>
          <li><a onclick="liClic(this,'MusClasCell')">baroque</a></li>
        </ul>
      </li>
      <li><a onclick="liClic(this,'MusExoCell')" class="toproot"><span>la musique exotique</span></a>
        <ul id="MusExoUl">
          <li><a onclick="liClic(this,'MusExoCell')">hispano</a></li>
          <li><a onclick="liClic(this,'MusExoCell')">afro</a></li>
        </ul>
      </li>
      <li><a onclick="liClic(this,'CineCell')" class="topmenu">le cinéma</a></li>
      <li><a onclick="liClic(this,'ChansonCell')" class="toproot"><span>la chanson</span></a>
        <ul id="ChansonUl">
          <li><a onclick="liClic(this,'ChansonCell')">française</a></li>
          <li><a onclick="liClic(this,'ChansonCell')">anglo-saxonne</a></li>
        </ul>
      </li>
      <li><a onclick="liClic(this,'DanseCell')" class="toproot"><span>la danse</span></a>
        <ul id="DanseUl">
          <li><a onclick="liClic(this,'DanseCell')">rock</a></li>
          <li><a onclick="liClic(this,'DanseCell')">sud américaine</a></li>
        </ul>
      </li>
      <li><a onclick="liClic(this,'InstrumCell')" class="toproot"><span>les insruments</span></a>
        <ul id="InstrumUl">
          <li><a onclick="liClic(this,'InstrumCell')">à vent</a></li>
          <li><a onclick="liClic(this,'InstrumCell')"><span>à cordes</span></a>
            <ul id="CordesUl">
              <li onclick="liClic(this,'InstrumCell')"><a>pincées</a></li>
              <li><a onclick="liClic(this,'InstrumCell')">frottées</a></li>
            </ul>
          <li>
      </li>
          <li><a onclick="liClic(this,'InstrumCell')"><span>les percussions</span></a>
            <ul id="PercusUl">
              <li><a onclick="liClic(this, 'InstrumCell')">famille des pianos</a></li>
              <li><a onclick="liClic(this, 'InstrumCell')">batterie</a></li>
              <li><a onclick="liClic(this, 'InstrumCell')">autres</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a onclick="liClic(this, 'HitsCell')" class="topmenu">les hits</a></li>
      <li><a onclick="liClic(this, 'StyleCell')" class="topmenu">les styles</a></li>
      <li><a onclick="liClic(this, 'GrandsNomsCell')" class="topmenu">les grands noms</a></li>
    </ul>
    Mais une fois le sous-menu caché, il n'apparait plus au survol par la souris de l'élément parent du menu.

    Ma question est de savoir comment réactiver le Hover de la feuille CSS.

    CSS :
    Code css : 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
    107
    table
    {
    }
    .sansbordure
    {
    border : 0px;
    }
     
     
    .bordure
    {
    border:4px #3e4388;
    border-style: ridge;
    background-color : #99ccff;
    }
    ul#css3menu1,ul#css3menu1 ul{
    	margin:0;list-style:none;padding:0;background-color:;border-width:0;border-style:solid;border-color:;}
    ul#css3menu1 ul
    {
    display:none;position:absolute;left:0;top:100%;background-color:#47515B;border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;
    -webkit-border-radius:0;-webkit-border-bottom-right-radius:10px;-webkit-border-bottom-left-radius:10px;padding:0 0 10px;
    }
    ul#css3menu1 li:hover>*{
    	display:block;}
    ul#css3menu1 li{
    	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
    ul#css3menu1 li:hover{
    	z-index:1;}
    ul#css3menu1 ul ul{
    	position:absolute;left:100%;top:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:10px 10px 20px;}
    ul#css3menu1{
    	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:10px 10px 10px 0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
    	*display:inline;}
    * html ul#css3menu1 li a{
    	display:inline-block;}
    ul#css3menu1>li{
    	margin:0 0 0 10px;}
    ul#css3menu1 ul>li{
    	margin:10px 0 0;}
    ul#css3menu1 a:active, ul#css3menu1 a:focus{
    	outline-style:none;}
    ul#css3menu1 a{
    	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Arial,sans-serif;color:#CBCFDB;cursor:default;padding:3px;background-color:#3e4388;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
    ul#css3menu1 ul li{
    	float:none;margin:0;}
    ul#css3menu1 ul a{
    	text-align:left;padding:4px;background-color:#47515B;border-width:0 0 1px 0;border-style:solid;border-color:#3B444C;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial,sans-serif;color:#CBCFDB;text-decoration:none;}
    ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    	background-color:#686fca;border-style:none;color:#FFFFFF;text-decoration:none;}
    ul#css3menu1 span{
    	display:block;overflow:visible;background-image:url("../img/arrowmain0.gif");background-position:right center;background-repeat:no-repeat;padding-right:17px;}
    ul#css3menu1 li:hover>a>span{
    	background-image:url("../img/arrowmain1.gif");}
    ul#css3menu1 ul span{
    	background-image:url("../img/arrowsub.png");padding-right:12px;}
    ul#css3menu1 ul li:hover > a span{
    	background-image:url("../img/arrowsub.png");}
    ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
    	background-color:#333A41;border-style:solid;border-color:#616D8E;color:#FFFFFF;text-decoration:none;}
    ul#css3menu1 ul ul li{
    	margin:10px 0 0;}
    ul#css3menu1>li>a{
    	padding:3px 10px;}
    ul#css3menu1 li.toproot>a{
    	border-width:0 0 3px 0;border-style:none;border-color:#3e4388;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;}
    ul#css3menu1 li.toproot:hover>a,ul#css3menu1 li.toproot a.pressed{
    	border-style:solid;border-color:#686fca;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
    ul#css3menu1 li.toproot:click>a,ul#css3menu1 li.toproot a.pressed{display:none}
    ul#css3menu1 li.topmenu>a{
    	border-width:0 0 3px 0;border-style:none;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;padding:3px 10px;}
    ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    	border-style:none;}
    body 
    {
     
      overflow:hidden; 		/* needed to eliminate scrollbars caused by the background image */
     
      padding:0;
      margin:0;		/* necesarry for the raster to fill the screen */
     
      height:100%;width:100%;
     
      font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
      color: #99CCFF;
    }
     
     
    #bgimg 
    {
     
      position:absolute;
     
      z-index: -1;
     
    }
     
     
    #realBody
    {
     
      position:absolute;
     
      z-index: 5;				/* Place the new body above the background image */
     
      overflow:auto; 			/* restore scrollbars for the content */
     
      height:100%;width:100%;	/* Make the new body fill the screen */
    Merci d'avance pour toute aide

  2. #2
    Membre extrêmement actif
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 387
    Billets dans le blog
    1
    Par défaut
    Bonjour,

    si tu force ton css à prendre la main :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
                ul#css3menu1 li:hover>* {
                    display:block !important;
                }
    ça marche.

    ça ma parait bien complexe pour un menu
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  3. #3
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut
    Oui, cela marche mais l'effet est le même qu'avant que j'aie introduit les instructions masquant les sous-menus après qu'un de leurs élément ait été cliqué.

    Or, je voudrais garder cette action dans l'évènement onclick.

    N'est-il pas possible de réactiver le css après ma fonction ?

  4. #4
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut
    Une question comme ça pour tenter d'avancer.

    Comment se fait-il que les sous-menus ne sont pas cachés quand on met le focus sur un élément en dehors du menu alors qu'ils le sont quand on fait passer la souris en dehors de ce même menu ?

    Avec mes remerciements anticipés.

  5. #5
    Membre extrêmement actif
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 387
    Billets dans le blog
    1
    Par défaut
    Je suppose que cela viens de hover dans le css.
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Bonjour,
    ...lu la discussion en diagonale mais
    Comment se fait-il que les sous-menus ne sont pas cachés quand on met le focus sur un élément en dehors du menu alors qu'ils le sont quand on fait passer la souris en dehors de ce même menu ?
    c'est souvent le sort quand on gère avec javascript et le CSS ce genre de menu.

    Le style "inline", dans les balises, est prioritaire par rapport à celui de la feuille de style et le javascript modifie cellui qui es "inline".
    exemple:
    Code html : 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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Le piège</title>
    <style>
    li ul li{
      display:none;
    }
    li:hover ul li{
      display:block;
    }
    </style>
    </head>
    <body>
    <ul>
      <li>Menu
        <ul>
          <li onclick="this.style.display='block';">Lien1</li>
          <li>Lien2</li>
        </ul>
      </li>
    </ul>
    </body>
    </html>

  7. #7
    Membre extrêmement actif
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 387
    Billets dans le blog
    1
    Par défaut
    Oui, il y à un mélange javascript / css qui se marche dessus.

    Il fraudais que tu te sépare de l'un ou de l'autre.
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  8. #8
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut
    Ajouter un click au hover dans le CSS pour cacher l'ul serait-il une solution ?

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Citation Envoyé par defluc Voir le message
    Ajouter un click au hover dans le CSS pour cacher l'ul serait-il une solution ?
    pas sûr qu'il faille mélanger les deux, je me dirigerais plus vers du tout javascript avec initialisation des onmouseover/out sur les éléments LI.
    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
    var oMenu = document.getElementById('css3menu1'); // l'ID est tres mal choisie du coup
    var oLU, oLI = oMenu.getElementsByTagName('LI');
    var i, nb = oLI.length;
    for( i=0; i <nb; i++){
      oLI[i].onmouseout = function(){
        oUL = this.getElementsByTagName('UL');
        if( oUL.length){
          oUL[0].style.display = 'none';
        }
      }
      oLI[i].onmouseover = function(){
        oUL = this.getElementsByTagName('UL');
        if( oUL.length){
          oUL[0].style.display = 'block';
        }
      }
    }
    ou un truc pas loin.

  10. #10
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut
    J'ai simplifié le fichier css.

    Par rapport à la suggestion de NoSmoking, c'est au clic que je veux cacher mes sous-menus car si la souris sort du sous-menu, celui-ci disparait bien.

    Comme on peut le tester sur le lien suivant http://www.defgnee.com/test/, quand on clique sur un élément du menu principal, celui-ci s'affiche dans une cellule.
    Mais si on clique sur un élément de sous-menu, celui-ci cache la cellule.

    J'ai testé les instructions d'affichage et de disparition du sous-menu par des boutons.
    Mais quand je place l'instruction dans la fonction LiClic, cela ne fonctionne pas.
    J'ai essayé de placer le focus sur un autre composant de la page. J'ai également simulé par programme un clic sur un autre composant. Rien à faire.
    Pourtant, l'instruction alert provoque la disparition du sous-menu. Il doit bien y avoir une autre instruction qui n'oblige pas à afficher un message et à cliquer sur un bouton ok.

    Merci à tous pour votre attention.

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Je dois admettre que j'ai du mou dans le cerveau
    Peux tu repréciser ce que tu souhaites faire au final, faire disparaitre les menus/sous menus, les affichages des cellules car dans ton code je ne vois pas trace de ma proposition.

  12. #12
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut
    Ce que je souhaite, c'est que les sous-menus soient cachés quand on clique sur un de ses éléments pour que la cellule qui affiche le contenu qui a été cliqué ne soit pas masqué par le sous-menu en question.

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Dans ce cas supprimes la gestion du hover dans le CSS pour la faire en javascript
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ul#css3menu1 li:hover > * {
    /*    display: block !important; /* A SUPPRIMER */
    }
    et pour la gestion en javascript ajoutes en fin de fichier
    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
    var oMenu = document.getElementById('css3menu1'); // l'ID est tres mal choisie du coup
    var oLU, oLI = oMenu.getElementsByTagName('LI');
    var i, nb = oLI.length;
    for( i=0; i <nb; i++){
      // mouse OUT et click même traitement
      oLI[i].onmouseout = oLI[i].onclick = function(){
        oUL = this.getElementsByTagName('UL');
        if( oUL.length){
          oUL[0].style.display = 'none';
        }
      }
      oLI[i].onmouseover = function(){
        oUL = this.getElementsByTagName('UL');
        if( oUL.length){
          oUL[0].style.display = 'block';
        }
      }
    }

  14. #14
    Membre éprouvé Avatar de defluc
    Homme Profil pro
    Architecte
    Inscrit en
    Mai 2002
    Messages
    1 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Architecte

    Informations forums :
    Inscription : Mai 2002
    Messages : 1 383
    Par défaut
    Cela répond tout à fait à mes attentes.

    Mille mercis

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

Discussions similaires

  1. JQuery cacher sous-menu
    Par dharkan dans le forum jQuery
    Réponses: 2
    Dernier message: 16/11/2011, 09h23
  2. cacher le sous menu
    Par killua86 dans le forum Forms
    Réponses: 0
    Dernier message: 06/07/2010, 18h33
  3. Cacher sous menu après le click
    Par Greatz dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 27/05/2008, 10h14
  4. Afficher/cacher sous menu
    Par tazmania dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 14/05/2007, 12h42
  5. Afficher/Cacher un sous menu au clic
    Par Toutankharton dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 28/09/2005, 16h18

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