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

Label: Truc Et Astuces, Tutoriel Blogger