Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu jQuery

Help

Sujet résolu
    7 septembre 2009 à 16:23:46

    Salut les Zéros=<
    Je voudrais crée un petit menu comme celui la (http://www.stunicholls.com/menu/jquery-menutree.html) avec jQuery
    y'a quelque tutoriel qui explique ça pour les menu avec des puces (ul,li ...)
    le code de mon menu c'est
    <span class="titlemenu">:: Menu Principale</span>
                        <a class="menuMain" target="milieu" href="accueil/accueil.php"><img border="0" src="images/puce.gif"> Accueil</a>
                        <a class="menuMain" target="milieu" href="http://127.0.0.1/test.php"><img border="0" src="images/puce.gif"> Actualité</a>
                        <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Vos Propositions</a>
                        <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Sondages</a>
                        <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Livre D'or</a>
                        <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Partenaires</a>
                        <a class="menuMain" target="milieu" href="Pages/ContacteZ">Contactez-nous</a>
                        <!-- /////MenuPrincipale-->
    

    je veux que quand les visiteurs clique sur Menu Principale le menu se réduit quand il reclique il s'ouvre
    merci d'avance j'epere que j'été clair
    • Partager sur Facebook
    • Partager sur Twitter
      7 septembre 2009 à 17:04:58

      Ca devrait ressembler à quelque chose comme cela:

      <span class="titlemenu" style="cursor:pointer;" onclick="if($('#menu').css('display')=='none') $('#menu').effect('slide'); else $('#menu').hide();">:: Menu Principale</span>
      	<div id="menu" style="display:none;">
                          <a class="menuMain" target="milieu" href="accueil/accueil.php"><img border="0" src="images/puce.gif"> Accueil</a>
                          <a class="menuMain" target="milieu" href="http://127.0.0.1/test.php"><img border="0" src="images/puce.gif"> Actualité</a>
                          <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Vos Propositions</a>
                          <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Sondages</a>
                          <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Livre D'or</a>
                          <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Partenaires</a>
                          <a class="menuMain" target="milieu" href="Pages/ContacteZ">Contactez-nous</a>
                          <!-- /////MenuPrincipale-->
      	</div>
      
      • Partager sur Facebook
      • Partager sur Twitter
        7 septembre 2009 à 17:23:12

        j'ai testé ca

        <LINK media=screen href="style.css" type=text/css rel=stylesheet>
         <script src='jquery.js' type='text/javascript'></script>
                            <span class="titlemenu" style="cursor:pointer;" onclick="if($('#menu').css('display')=='none') $('#menu').effect('slide'); else $('#menu').hide();">:: Menu Principale</span>
                            <div id="menu" style="display:none;">
        					<a class="menuMain" target="milieu" href="accueil/accueil.php"><img border="0" src="images/puce.gif"> Accueil</a>
                            <a class="menuMain" target="milieu" href="http://127.0.0.1/test.php"><img border="0" src="images/puce.gif"> Actualité</a>
                            <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Vos Propositions</a>
                            <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Sondages</a>
                            <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Livre D'or</a>
                            <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Partenaires</a>
                            <a class="menuMain" target="milieu" href="Pages/ContacteZ">Contactez-nous</a>
        					</div>
        

        le menu est reduit mais il s'ouvre pas
        • Partager sur Facebook
        • Partager sur Twitter
          7 septembre 2009 à 17:27:15

          heu rassure moi... tu as des balises html head body et tout et tout ?
          • Partager sur Facebook
          • Partager sur Twitter
            7 septembre 2009 à 17:30:51

            voila le code de ma page test

            <!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>Essai</title>
                      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            		  <LINK media=screen href="style.css" type=text/css rel=stylesheet>
            		  </head>
                 <body>
             
             
            
                
                
                                <span class="titlemenu" style="cursor:pointer;" onclick="if($('#menu').css('display')=='none') $('#menu').effect('slide'); else $('#menu').hide();">:: Menu Principale</span>
                                <div id="menu" style="display:none;">
            					<a class="menuMain" target="milieu" href="accueil/accueil.php"><img border="0" src="images/puce.gif"> Accueil</a>
                                <a class="menuMain" target="milieu" href="http://127.0.0.1/test.php"><img border="0" src="images/puce.gif"> Actualité</a>
                                <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Vos Propositions</a>
                                <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Sondages</a>
                                <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Livre D'or</a>
                                <a class="menuMain" target="milieu" href="#"><img border="0" src="images/puce.gif"> Partenaires</a>
                                <a class="menuMain" target="milieu" href="Pages/ContacteZ">Contactez-nous</a>
            					</div>
            					</body>
            </html>
            
            • Partager sur Facebook
            • Partager sur Twitter
              7 septembre 2009 à 17:40:15

              Tu n'as pas inclus ton jquery.js dans le code que tu as collé, normal?
              • Partager sur Facebook
              • Partager sur Twitter
                7 septembre 2009 à 17:42:47

                si il est j'ai just oublié de le metre sur le code que j'ai collé ici a ka testé
                test chez toi est envoi moi une réponse final stp

                PS:tu peu t'inspirai de se code http://www.alsacreations.com/tuto/lire [...] c-jQuery.html

                moi je connais rien on JS :s
                • Partager sur Facebook
                • Partager sur Twitter
                  7 septembre 2009 à 21:55:10

                  merci beaucoup c'est exactement se que je cherché
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Menu jQuery

                  × 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