Liste Déroulante Avec Liens Hypertexte

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

-Selectionnez votre destination- Widget Libellés En Nuage Animé Widget Commentaires Récents Ajouter L'effet Arc En Ciel Formulaire De Contact Gratuit

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 :

-Selectionnez votre destination- Liens De Navigation Blogger Résumé Automatique Avec Image Bouton De Partage Facebook Bouton StumbleUpon Bouton De Partage LinkedIn Sitemap Blogger Inscription Moteurs De Recherche

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".