Partage

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

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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.
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.
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
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>


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 :)
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>
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>

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