10 févr. 2013

Liste Déroulante Avec Liens Hypertexte

Liste Déroulante Avec Lien
Afficher une liste déroulante HTML dont chaque option serait un lien hypertexte aboutissant à une des pages de votre site/blog.
Lorsque l'on choisi un élément, l'url de cette page s'ouvre sans que l'on soit obliger de cliquer sur un bouton envoyer (submit).
Dans la suite, nous allons voir comment créer une liste déroulante simple contenant une série de liens parmi lesquelles le visiteur peut en choisir un, et une autre liste qui demande d'utiliser l'élément optgroup si vous choisissez de regrouper des éléments.  


Comment Créer Une Liste Déroulante Avec Des Liens Hypertextes

Démonstration

Code De La Liste
<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
  <option value="Lien 1">Titre 1</option>
  <option value="Lien 2">Titre 2</option>
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option
</SELECT>
</FORM>

Configuration De La Liste

Menu Déroulant De Liens :  c'est le titre à afficher sur la lite, vous pouvez le modifier avec un titre de votre choix.
Lien 1, Lien2, Lien 3 et Lien 4 sont les adresses (url) des pages vers lesquelles vont pointer les entrées Titre1, Titre 2, Titre 3 et Titre 4; Vous devez faire les modifications nécessaires.
Vous pouvez rajouter autant de liens que vous le désirez en recopiant la ligne : 
<option value="Lien X">Titre X</option>

Liste Déroulante Avec Regroupement D'éléments :

Plutôt que de définir les éléments <option> les uns à la suite des autres, ce qui donne un aspect uniforme à la liste une fois déroulée, il est possible de créer des groupes d’options et de leur attribuer un titre qui fait ressortir les groupements effectués pour structurer la liste, en particulier quand elle contient un grand nombre d’éléments. Pour réaliser ces groupes, il faut faire intervenir l’élément <optgroup> dans l’élément <select>.

Démonstration :


Code De La Liste
<script language="JavaScript">
function ChangeUrl(formulaire)
   {
   if (formulaire.ListeUrl.selectedIndex != 0)
      {
     var url ;
     url = formulaire.ListeUrl.options[formulaire.ListeUrl.selectedIndex].value;
     window.open(url,'_blank');
       }
   }
</script>
<FORM >
<SELECT NAME="ListeUrl" SIZE=1 onChange="ChangeUrl(this.form)"  >
<OPTION SELECTED VALUE="">-Menu Déroulant De Liens-</option>
<optgroup label="Groupe 1">
  <option value="Lien 1">Titre1</option>
  <option value="Lien 2">Titre 2</option>
</optgroup>
<optgroup label="Groupe 2">
  <option value="Lien 3">Titre 3</option>
  <option value="Lien 4">Titre 4</option
<option value="Lien 5">Titre 5</option>
</optgroup>
<optgroup label="Groupe 3">
<option value="Lien 6">Titre 6</option>
  <option value="Lien 7">Titre 7</option
</optgroup>
</SELECT>
</FORM>

Configuration De La Liste 

Les options de chaque groupe sont incluses entre les balises <optgroup> et </optgroup>. À l’intérieur d’un élément <select>, on peut inclure autant de groupes que l’on veut. Le libellé de chaque groupe est donné dans l’attribut label de l’élément <optgroup>.

Comment Ajouter Un Menu Déroulant De Liens Dans Blogger

Copier le code de la liste de votre choix (sans ou avec regroupement d'éléments) et allez à :
"Mise En Page" > "Ajouter un Gadget" > "HTML/JavaScript"
collez le code dans la petite fenêtre qui s'ouvre, et enfin cliquez sur "Enregistrer".

11 commentaires:

  1. Magnifique travail, et un bon effort, je vous remercie pour votre sujet :)
    Dans le même cadre, je voudrais vous proposer ce merveilleux programme où vous pouvez obtenir des milliers de visiteurs sans le moindre effort:
    Une explication complète du programme des visiteurs et l'inscription des membres et des listes de diffusion: Rusers

    bon chance :)

    RépondreSupprimer
  2. Bonjour, merci pour ce code par contre j'ai besoin de précisions car je suis débutant...

    Comment dois je faire si je veux que quand on clique Lien 2 ça m'oriente vers www.google.fr par exemple, que Lien 3 m'oriente vers www.yahoo.fr etc...

    Un grand merci d'avance pour votre aide

    Jérôme

    RépondreSupprimer
  3. Super astuce, Mais comment fais-tu pour ouvrir les liens sur la même page ???

    RépondreSupprimer
  4. Bonjour!
    Je voudrais savoir s'il est possible d'avoir le même style de chose, mais plutôt qu'une liste déroulante, lorsque l'on clique sur ''Livre'' par exemple, une liste apparaisse...?
    Merci d'avance et aussi pour ton site super bien fait et pratique!

    RépondreSupprimer
  5. Super article, merci.

    Pour répondre à "Anonyme", pour ouvrir les liens sur la même page, il faut remplacer "blank" par "self", dans cette ligne de code (au début) window.open(url,'_blank');

    RépondreSupprimer
  6. Bonjour, dans le cadre de mes cours, je dois créer un livre numérique. J'ai quelques connaissances dans Word mais loin d'être un débrouillé.
    j'ai insérer des liens hypertexte dans mon sommaire qui me mène aux différents chapitre mais le prof en veut bien plus.
    Mon but étant d'insérer un bas de page une liste déroulante :
    - sommaire
    - chapitre 1
    - chapitre 2 ...
    et que lorsque je choisis l'un d'entre eux, cela me ramène directement vers le signet du chapitre demandé.

    Exactement comme la première liste ci-dessus. mais j'ai très peu de connaissance en codage, j'ai compris qu'il faut faire un copier/coller et modifier les titres, mais où faut t'il entrer le code ? Visual basic ?

    Merci d'avance de votre aide :)

    RépondreSupprimer
  7. Merci pour ce tuto :)
    Malheureusement chez moi, quand je clic sur un lien dans la liste, il ne se passe rien, il ne s'ouvre pas...

    RépondreSupprimer
  8. Absolument génial, pile ce que je cherchais pour mon blog !
    Cependant, j'aimerais ajouter un sous-niveau supplémentaire pour chaque "option".
    Est-il possible d'en faire ? =S
    Je transmettrais le HTML de mon menu si besoin ! =)

    RépondreSupprimer
  9. -Hello guys check out this new entertainement website and watch all your favorite MOVIES, TV-SHOWS, SPORT STREAMS and way more all in HD at https://olympus.live

    RépondreSupprimer
  10. Pour ouvrir dans la même page,
    Remplace : window.open(url,'_blank');
    par : window.open(url,"_self");

    RépondreSupprimer