Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Jquery] Menu

Sujet résolu
    19 décembre 2010 à 14:25:54

    Bonjour,

    Etant un débutant en javascript, et voulant un peu animer mon site web, j'ai voulu faire un menu déroulant.

    Une fois réaliser grâce à ce tuto, j'ai vu que lors d'un changement de page, mon menu se fermais automatiquement.

    Ce que j'aimerais, c'est qu'il mémorise l'onglet ouvert et qu'il reste ouvert meme apres le changement de page.

    Voici mon code html du menu.

    <ul class="Menu">
          <li><a href="../HTML/index.php" title="Accueil">Accueil</a></li>
          <li class="titreSousMenu"><span class="presentation-club">Notre club</span>
            <ul class="sousMenu open_at_load">
              <li><a href="../HTML/presentation-club.php" title="Presentation du club">Présentation</a></li>
              <li><a href="../HTML/disciplines.php" title="Disciplines du club">Disciplines</a>
                <!--<ul class="sousSousMenu">
                  <li><a href="../HTML/baby-judo.php" title="Baby judo">Baby judo</a></li>
                  <li><a href="../HTML/judo.php" title="Judo">Judo</a></li>
                  <li><a href="../HTML/ju-jitsu.php" title="Ju-jitsu">Ju-jitsu</a></li>
                  <li><a href="../HTML/fighting.php" title="Fighting">Fighting</a></li>
                </ul>-->
              </li>
              <li><a href="../HTML/plan-acces.php" title="Acces">Accès</a></li>
              <li><a href="../HTML/Horaires.php" title="Horaires">Horaires</a></li>
              <li><a href="../HTML/les-professeurs.php" title="Professeurs">Professeurs</a></li>
              <li><a href="../HTML/le-bureau.php" title="Bureau">Le bureau</a></li>
              <li><a href="../HTML/le-dojo.php" title="Dojo">Le Dojo</a></li>
            </ul>
          </li>
          <li><a href="../HTML/nous-contacter.php" title="Nous Contacter">Nous Contacter</a></li>
          <li><a href="#" title="photos/video">Photos/Vidéo</a></li>
          <li><a href="#" title="Calendriers Sportifs">Calendriers Sportifs</a></li>
          <li class="titreSousMenu"><span>L'esprit du judo</span>
            <ul class="sousMenu open_at_load">
              <li><a href="../HTML/Code-moral.php" title="Code moral">Code moral</a></li>
              <li><a href="../HTML/es-dans-cs.php" title="Un esprit sain dans un corps sain">Un esprit sain dans un corps sain</a></li>
              <li><a href="../HTML/historique-judo.php" title="Historique du judo">Historique du judo</a></li>
            </ul>
          </li>
          <li class="titreSousMenu"><span>Partenaires</span>
            <ul class="sousMenu open_at_load">
              <li><a href="#" title="Tagoya">Tagoya</a></li>
              <li><a href="#" title="E.S.O">E.S.O</a></li>
              <li><a href="#" title="LCL">LCL</a></li>
            </ul>
          </li>
        </ul>
    


    et voici le code javascript qui se trouve sur un fichier .js externe.
    $(document).ready( function () { 
        // On cache les sous-menus : 
    	 //$(".Menu ul.sousMenu").hide();
       	$(".Menu ul.sousMenu:not('.open_at_load')").hide(); 
    	//$(".Menu ul.sousSousMenu:not('.open_at_load')").hide(); 
    	
        // On sélectionne tous les items de liste portant la classe "titreSousMenu" 
     
        // et on remplace l'élément span qu'ils contiennent par un lien : 
    	$(".Menu li.titreSousMenu span").each( function () { 
            // On stocke le contenu du span : 
            var TexteSpan = $(this).text(); 
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
        });
    
        // On modifie l'évènement "click" sur les liens dans les items de liste 
        // qui portent la classe "titreSousMenu" : 
        $(".Menu li.titreSousMenu > a").click( function () { 
            // Si le sous-menu était déjà ouvert, on le referme : 
            if ($(this).next("ul.sousMenu:visible").length != 0) { 
    			$(this).next("ul.sousMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            } 
            // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
            else { 
                $(".Menu ul.sousMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
                $(this).next("ul.sousMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            } 
            // On empêche le navigateur de suivre le lien : 
            return false; 
        }); 
    });
    


    Si quelqu'un aurais une idée, je serais preuneur. J'ai voulu utiliser les GET, mais comme le javascript se trouve dans un .js , il ne prend pas en compte le php que je lui donne.

    Merci d'avance de votre aide.
    • Partager sur Facebook
    • Partager sur Twitter
      19 décembre 2010 à 18:01:35

      Ca se fait en PHP, et non en JS.

      Il faut que tu donnes la class "open_at_load" à l'onglet que tu veux voir ouvert.
      • Partager sur Facebook
      • Partager sur Twitter
        19 décembre 2010 à 19:58:23

        Oui ça j'ai compris :D . Mais ce que j'aimerais faire c'est laisser ouvert le menu que l'utilisateur veux. En gros, si il clique sur le lien d'un sous menu, celui ci devrait resté ouvert. Par contre, si il ouvre un autre sous menu, lancien se ferme et le nouveau s'ouvre et reste ouvert meme apres l'ouverture d'une autre page.

        Je sais pas si ce que je dit a du sens donc n'hésité pas a me redemander des explication si vous ne comprennez pas bien =).
        • Partager sur Facebook
        • Partager sur Twitter
          19 décembre 2010 à 20:08:13

          Ouais,

          Donc en gros ce que tu proposes c'est de mettre le nom du sous-menu dans un coockie et de l'utilisé pour ensuite l'ouvrire avec le javascript. Ce serais un peu le meme principe que d'utilisé la méthode GET.
          Mais mon probleme est que pour reprendre les données, je dois utilisé du php et que dans mon fichier .js ( la ou se trouve mon code pour l'animation de mon menu ) je n'arrive pas a utilisé du php, on dirait qu'il n'est pas pris en compte. j'ai fais un simple alert("<?php echo hello world ! ?>"); et il m'a afficher une fenetre avec écrit dedans:
          <?php echo hello world ! ?>

          Comment faire pour utilisé du php dans un .js =)
          • Partager sur Facebook
          • Partager sur Twitter
            19 décembre 2010 à 20:31:51

            Moi perso je comprends pas bien... Le sous-menu ouvert ne dépend donc pas de la page actuellement affichée ?
            • Partager sur Facebook
            • Partager sur Twitter
              20 décembre 2010 à 2:13:11

              Salut,

              A ma connaissance, tu ne peux pas faire du php avec javascript. Par contre tu peux faire du javascript avec du PHP.

              Tu peux très bien faire exécuter une ligne de javascript qui "déroule" le menu passé en paramètre. La page se charge, tu récupères en GET dans le script PHP le menu à dérouler, puis tu fais un echo pour exécuter le code javascript correspondant. Du genre (pour l'idée) :
              <?php
              echo '<script type="text/javascript">deroulerMenu("'.$_GET['menu'].'");</javascript>';
              ?>
              


              J'ai peur que ce ne soit pas très propre cependant (d'ailleurs, je ne sais même pas si ça va marcher, mais ça devrait). Des personnes plus expérimentées te conseilleront sûrement mieux que moi !

              Bonne soirée,

              Spoutnik.
              • Partager sur Facebook
              • Partager sur Twitter
                20 décembre 2010 à 2:16:36

                Y'a même pas besoin de faire ça !

                Il suffit de gérer en PHP l'ajout ou non de la classe "open_at_load" sur les sous-menus en fonction de celui qui doit être ouvert :o
                • Partager sur Facebook
                • Partager sur Twitter
                  20 décembre 2010 à 2:19:45

                  Très juste, et bien plus propre que ma proposition.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    20 décembre 2010 à 23:32:18

                    Citation : Golmote

                    Y'a même pas besoin de faire ça !

                    Il suffit de gérer en PHP l'ajout ou non de la classe "open_at_load" sur les sous-menus en fonction de celui qui doit être ouvert :o



                    Oui ça marche mais le probleme est que mon site est dynamique et que j'utilise un model de page qui englobe le menu. Donc si je met la classe open_at_load sur un menu il sera mis sur toutes les pages.
                    Donc en gros tous les menus s'ouvre et cela tout le temp.

                    • Partager sur Facebook
                    • Partager sur Twitter
                      21 décembre 2010 à 0:47:28

                      Ouais bah les détails techniques côté PHP, c'est pas mon domaine.

                      Ce problème n'a (plus) rien à faire dans ce forum...
                      • Partager sur Facebook
                      • Partager sur Twitter

                      [Jquery] Menu

                      × 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