Partage
  • Partager sur Facebook
  • Partager sur Twitter

menu deroulant avec ancre

Sujet résolu
    24 janvier 2006 à 22:28:07

    Bonjour a tous.

    J'aimerais savoir si il est possible de creer un menu deroulant qui mene a une ancre de la page.

    Je m'explique plus clairement. Je sais creer un menu deroulant:

    <form method="post" action="journal1.html">
          <label>
               Quelle page voulez vous lire ?<br />
               <select name="page">
                  <option value="page1">Page 1</a>
                  <option value="page2">Page 2</option>
               </select>
           </label>


    Je sais crer une ancre avec:

    <li>Visualiser la <a href="#page1">Page 1</a></li>

    et
    <td id="page1">


    Mais comme j'ai beaucoup de page a faire lire cela ne fait pas tres beau de faire un sommaire ultra long, donc j'ai pensé a faire un menu deroulant qui menerais a la page souhaiter.

    Pour vous rendre mieux compte du probleme je vous donne l'adresse du site:
    http://jdrwayne.free.fr/journal1.html
    • Partager sur Facebook
    • Partager sur Twitter
      24 janvier 2006 à 23:00:04

      Salut !!

      Je ne pense pas que ce soit possible de mettre des liens dans une liste déroulante.

      Sinon en php, tu peux très bien amener l'utilisateur à un endroit spécifique d'une page après un submit.
      • Partager sur Facebook
      • Partager sur Twitter
        24 janvier 2006 à 23:16:00

        Bah, suivant l'option sélectionnée, tu fais un header() vers la page en question.

        Par exemple :


        if($_POST['page'] == 'page1')
        {
          header('location: page1.php#ancre');
        }


        Et ainsi de suite pour chacune de tes options.
        • Partager sur Facebook
        • Partager sur Twitter
          25 janvier 2006 à 0:42:53

          C'est tout à fait possible de mettre des lines dans une liste déroulant
          <p><select name="fCountry">
          <option value="0">TITRE</option>
          <option value="http://...">1</option>
          <option value="http://...">2</option>
          <option value="http://...">3</option>
          <option value="http://...">4</option>
          <option value="http://...">5</option>
          </select></p>

          a toi de voir pour la suite
          • Partager sur Facebook
          • Partager sur Twitter
            25 janvier 2006 à 17:47:14

            Voilà j'ai passé un petit bout de temps à trouver la fonction que je cherchais et j'ai réussi à faire marcher un select qui renvoit vers une ancre (quand tu le déselectionne (onBlur)) Voila le code utiliser:


            <script type="text/javascript">
                    function goAncre(ancre,adresse){
                            location.href = adresse+"#"+ancre;
                    }
            </script>

            <p><select name="fCountry" onBlur="javascript:goAncre(this.value,location.href)">
            <option value="ancre">1</option>
            <option value="test">2</option>
            </select>
            </p>


            <p id="ancre">bouh</p>


            <p id="test">rebouh</p>


            • Partager sur Facebook
            • Partager sur Twitter
              25 janvier 2006 à 18:36:04

              Pour le cas du java script, c'est une tres bonne idée mais ça ne fonctionne qu'une foix. Car lorsque tu essaye de visionner plusieur page en te referent au sommaire tu te trouve avec une adresse de ce style:
              http://jdrwayne.free.fr/journal1.html#haut#page4#page2#page1#page3#page3#page3#page2#page1

              Faudrait finir le code pour dire que une foix transferer a l'ancre que l'effet s'annul, mais je ne sais pas le faire :)
              • Partager sur Facebook
              • Partager sur Twitter
                25 janvier 2006 à 18:56:58

                Dreamweaver à une fonction pour faire ce genre de menu. voici le script qu'il génère. Ok pour le XHTML :

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
                <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        <title>Document sans nom</title>
                        <script type="text/JavaScript">
                        <!--
                        function MM_jumpMenu(targ,selObj,restore){ //v3.0
                          eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'&quot;);
                          if (restore) selObj.selectedIndex=0;
                        }
                       
                        function MM_findObj(n, d) { //v4.01
                          var p,i,x;  if(!d) d=document; if((p=n.indexOf("?&quot;))>
                0&&parent.frames.length) {
                                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                          if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                          for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                          if(!x && d.getElementById) x=d.getElementById(n); return x;
                        }
                       
                        function MM_jumpMenuGo(selName,targ,restore){ //v3.0
                          var selObj = MM_findObj(selName); if (selObj) MM_jumpMenu(targ,selObj,restore);
                        }
                        //-->

                        </script>
                </head>
                <body>
                <div>
                <form action="" id="menu_form">
                  <div> 
                    <select name="menu_select" onchange="MM_jumpMenu('parent',this,0)">
                      <option value="page.html#1">1</option>
                      <option value="page.html#2">2</option>
                      <option value="page.html#3">3</option>
                    </select>
                    <input type="button" name="Button1" value="Aller" onclick="MM_jumpMenuGo('menu','parent',0)" />
                  </div>
                </form>
                </div>
                </body>
                </html>
                • Partager sur Facebook
                • Partager sur Twitter
                Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - Dynamisez vos sites avec JS - jQuery - Cheatsheet JS
                  26 janvier 2006 à 10:54:34

                  Voilà j'ai corrigé ma fonction...maintenant les ancres ne s'accumulent plus:


                  <script type="text/javascript">
                          function goAncre(ancre,adresse){
                                  location.href = adresse.split('#')[0]+"#"+ancre;
                          }
                  </script>

                  <p><select name="fCountry" onBlur="javascript:goAncre(this.value,location.href)">
                  <option value="ancre">1</option>
                  <option value="test">2</option>
                  </select>
                  </p>


                  <p id="ancre">bouh</p>


                  <p id="test">rebouh</p>
                  • Partager sur Facebook
                  • Partager sur Twitter

                  menu deroulant avec ancre

                  × 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