Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fonctionnement d'un menu sans l'attribut hover

Utilisation de jquery

    31 janvier 2010 à 11:27:31

    Bonjour à tous et à toutes

    Voila, je suis en train de faire un menu déroulant (rubrique et sous-rubrique) et je ne souhaite pas utiliser l'attribut hover. Je souhaite afficher les sous rubriques grâce à jquery (javascript).

    Voici mon menu
    <div id="menu">
    <dl>
    			<dt class="desactive">
    				<a href="http://localhost/index/notre-village.html">Notre village</a>
    			</dt>
    			<dd>
    				<ul>
    					<li>
    					<a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a>
    					</li>
    					<li>
    					<a href="http://localhost/index/notre-village/histoire.html">Histoire</a>
    					</li>
    					<li>
    					<a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a>
    					</li>
    					<li>
    					<a href="http://localhost/index/notre-village/en-image.html">En image</a>
    					</li>
    				</ul>
    			</dd>
    		</dl>
    <dl>
    			<dt class="desactive">
    				<a href="http://localhost/index/notre-village.html">Notre village</a>
    			</dt>
    			<dd>
    				<ul>
    					<li>
    					<a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a>
    					</li>
    					<li>
    					<a href="http://localhost/index/notre-village/histoire.html">Histoire</a>
    					</li>
    					<li>
    					<a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a>
    					</li>
    					<li>
    					<a href="http://localhost/index/notre-village/en-image.html">En image</a>
    					</li>
    				</ul>
    			</dd>
    		</dl> ....
    </div>
    


    Par défaut tout les dd sont cachés grâce à du css. (display:none).
    Dans l'exécution de la page, lorsque je serais sur une balise dt, j'affiche le bon sous menu, en indiquant une nouvelle propriété style, (display:block).

    Donc voici le code javascript que j'utilise actuellement.
    $(document).ready(function() {
    	//bloque les click sur les menus présentant des sous-menus
    	$("#menu dl dt.desactive").click(function(event){
    		event.preventDefault();
    	});
    	//apparition du sous menu
    	$("#menu dt.desactive").mouseover(function(){
    		//cache tous les sous menu (dd)
    		$("dd").css('display','none');
    		//récuperer la bonne position du curseur (souris)
    		var cursore=$(this);
    		//récupérer le bon sous-menu à afficher
    		var ssmenu = cursore.next("dd");
    		//affiche le bon sous-menu
    		ssmenu.css('display','block');
    	});
    });
    


    Ce code n'est pas encore fini, je n'arrive pas à voir quel code faire pour faire disparaitre mon sous menu, lorsque je ne suis plus sur le menu.

    Quelqu'un verrait-il comment faire pour que mon menu disparaisse lorsque je ne suis plus sur mon menu.

    Merci d'avance.
    lemirandais
    • Partager sur Facebook
    • Partager sur Twitter
    Dommage, impossible de mettre ma signature
      1 février 2010 à 11:56:18

      Personne?
      • Partager sur Facebook
      • Partager sur Twitter
      Dommage, impossible de mettre ma signature
        1 février 2010 à 12:06:12

        Bonjour,

        C'est un peu moche ton imbrication de balises :(

        Elles sont où les définitions ?

        Tu ferais mieux d'imbriquer des listes simples. Si t'es d'accord avec ce principe, je veux bien t'aider à faire ton JS.

        ++
        • Partager sur Facebook
        • Partager sur Twitter
          1 février 2010 à 14:21:16

          Merci pour ta réponse. Si je comprend bien ta réponse, tu me dis qu'il vaut mieux utiliser les listes imbriqués (ul et li) plutôt que les balises d, dt et dl.
          Ok, pour moi, le but est que mon menu fonctionne.
          Il devrait donc ressembler à un truc dans ce genre:
          <div id="menu">
          <ul>
              <li class="desactive"><a href="http://localhost/index/notre-village.html">Notre village</a>
                  <ul>
                  <li><a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a></li>
          	<li><a href="http://localhost/index/notre-village/histoire.html">Histoire</a></li>
          	<li><a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a></li>
          	<li><a href="http://localhost/index/notre-village/en-image.html">En image</a></li>
                  </ul>
              </li>
              <li class="desactive"><a href="http://localhost/index/notre-village.html">Notre village</a>
          	<ul>
                  <li><a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a></li>
          	<li><a href="http://localhost/index/notre-village/histoire.html">Histoire</a></li>
          	<li><a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a></li>
          	<li><a href="http://localhost/index/notre-village/en-image.html">En image</a></li>
          	</ul>
              </li>
              <li><a href="http://localhost/index/contact.html">Histoire</a></li>
          </ul>
          </div>
          
          • Partager sur Facebook
          • Partager sur Twitter
          Dommage, impossible de mettre ma signature
            1 février 2010 à 15:22:48

            Re,

            Voilà ce que j'ai de mon côté :

            <!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" lang="fr" dir="ltr">
              <head>
                <title></title>
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
                <script type="text/javascript">
                  $(document).ready(function() {
                    $('#menu ul').css('display', 'none');
            
                    $('#menu > li').mouseover(function() {
                      $(this).children('ul').css('display', 'block');
                    });
            				
                    $('#menu > li').mouseout(function() {
                      $(this).children('ul').css('display', 'none');
                    });				
                  });
                </script>
              </head>
              <body>
                <ul id="menu">
                  <li><a href="http://localhost/index/notre-village.html">Notre village</a>
                    <ul>
                      <li><a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a></li>
                      <li><a href="http://localhost/index/notre-village/histoire.html">Histoire</a></li>
                      <li><a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a></li>
                      <li><a href="http://localhost/index/notre-village/en-image.html">En image</a></li>
                    </ul>
                  </li>
                  <li><a href="http://localhost/index/notre-village.html">Notre village</a>
                    <ul>
                      <li><a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a></li>
                      <li><a href="http://localhost/index/notre-village/histoire.html">Histoire</a></li>
                      <li><a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a></li>
                      <li><a href="http://localhost/index/notre-village/en-image.html">En image</a></li>
                    </ul>
                  </li>
                  <li><a href="http://localhost/index/contact.html">Histoire</a></li>
                </ul>	
              </body>
            </html>
            


            ++
            • Partager sur Facebook
            • Partager sur Twitter
              2 février 2010 à 9:47:15

              Citation : jordan

              Re,

              Voilà ce que j'ai de mon côté :

              <!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" lang="fr" dir="ltr">
                <head>
                  <title></title>
                  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
                  <script type="text/javascript">
                    $(document).ready(function() {
                      $('#menu ul').css('display', 'none');
              
                      $('#menu > li').mouseover(function() {
                        $(this).children('ul').css('display', 'block');
                      });
              				
                      $('#menu > li').mouseout(function() {
                        $(this).children('ul').css('display', 'none');
                      });				
                    });
                  </script>
                </head>
                <body>
                  <ul id="menu">
                    <li><a href="http://localhost/index/notre-village.html">Notre village</a>
                      <ul>
                        <li><a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a></li>
                        <li><a href="http://localhost/index/notre-village/histoire.html">Histoire</a></li>
                        <li><a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a></li>
                        <li><a href="http://localhost/index/notre-village/en-image.html">En image</a></li>
                      </ul>
                    </li>
                    <li><a href="http://localhost/index/notre-village.html">Notre village</a>
                      <ul>
                        <li><a href="http://localhost/index/notre-village/situation-et-acces.html">Situation et accès</a></li>
                        <li><a href="http://localhost/index/notre-village/histoire.html">Histoire</a></li>
                        <li><a href="http://localhost/index/notre-village/patrimoine.html">Patrimoine</a></li>
                        <li><a href="http://localhost/index/notre-village/en-image.html">En image</a></li>
                      </ul>
                    </li>
                    <li><a href="http://localhost/index/contact.html">Histoire</a></li>
                  </ul>	
                </body>
              </html>
              



              ++



              Tu as fais une petite erreur. Dans mon menu, je veux afficher les sous-rubriques. Avec cette ligne $('#menu ul').css('display', 'none'); , je cache directement tout mon menu. Voici la correction, ton code m'a bien aidé:
              $(document).ready(function() {
              		$("#menu ul li.desactive a").click(function(event){
              		event.preventDefault();
              	});
              
                      $('#menu ul ul').css('display', 'none');
              
                      $('#menu ul > li').mouseover(function() {
                        $(this).children('ul').css('display', 'block');
                      });
              				
                      $('#menu ul > li').mouseout(function() {
                        $(this).children('ul').css('display', 'none');
                      });				
                    });
              


              Cependant, j'ai un petit problème, dans une des pages du site que je prépare via cmsms (made in simple), j'ai un map google qui est inséré par le module google. Cette map passe tout le temps au dessus du menu déroulant:
              Image utilisateur

              Quelqu'un aurait-il une idée pour que le menu déroulant s'affiche au dessus?
              Merci en tout cas jordan.

              Cordialement
              lemirandais
              • Partager sur Facebook
              • Partager sur Twitter
              Dommage, impossible de mettre ma signature
                2 février 2010 à 12:13:24

                Re,

                Essaye d'appliquer un z-index sur ton #menu.

                ++
                • Partager sur Facebook
                • Partager sur Twitter
                  2 février 2010 à 12:47:19

                  Dans le genre je suis pas encore réveillé, je voudrais le roi, ben c'est moi.
                  Tout mes problèmes sont résolus.
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Dommage, impossible de mettre ma signature
                    2 février 2010 à 12:51:01

                    Pense à mettre ton sujet en résolu à l'aide du lien en bas de page ;)
                    • Partager sur Facebook
                    • Partager sur Twitter
                      4 mars 2010 à 10:38:38

                      Bonjour à tous, je relance mon problème car sous IE, j'ai un défaut, mon menu ne fonctionne pas:
                      Mon site

                      En fait lorsque j'arrive soit au 2nd ou au 3ème rang du sous menu, le sous menu disparait, comme si l'effet mouseover() disparaissait.
                      Quelqu'un pourrait-il tester sous Internet explorer pour voir s'il s'agit d'un bug local si tout le monde là. Le bug serait sous Internet Explorer 7. Sur le 8, il n'y a pas de problème.


                      • Partager sur Facebook
                      • Partager sur Twitter
                      Dommage, impossible de mettre ma signature
                        8 mars 2010 à 11:28:47

                        Je me permet de relancer le topic car je ne vois pas du tout d'où peut venir ce problème!

                        Merci d'avance à tous ce qui pourront m'aider.

                        lemirandais
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Dommage, impossible de mettre ma signature
                          8 mars 2010 à 12:41:06

                          Essaye en remplaçant les mouseover et mouseout par mouseenter et mouseleave
                          • Partager sur Facebook
                          • Partager sur Twitter
                            8 mars 2010 à 14:25:36

                            pareil, mais c'est qd même bizarre, sa ne le fait que sous ie7.
                            • Partager sur Facebook
                            • Partager sur Twitter
                            Dommage, impossible de mettre ma signature

                            Fonctionnement d'un menu sans l'attribut hover

                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                            • Editeur
                            • Markdown