Création d'un menu déroulant pour vos liens

Afficher une liste de liens est une chose que tous les auteurs de sites Web doivent faire à un moment ou à un autre. Ce type de liste prend de la place, et graphiquement parlant, c'est plutôt monotone. Il est possible toutefois de présenter votre liste de liens dans un menu déroulant. C'est un peu plus de travail, mais le menu est plus compact et plus facile à intégrer dans le design de votre page.

Un exemple
Voici un menu déroulant que vous pouvez utiliser pour accéder à certaines de mes pages:

Comment inclure ce type de menu déroulant dans votre page?

Première étape, copiez le contenu du cadre ci-dessous dans le code de votre page Web, à l'endroit où vous désirez que le menu apparaisse. (Sélectionnez le texte du cadre et utilisez la commande "Copier" du menu "Édition" de votre logiciel de navigation. Ensuite, à l'aide de la commande "Coller" de votre éditeur HTML, insérez le tout dans vote fichier HTML.)

<FORM NAME="liste1">
<SELECT NAME="choix">
<OPTION VALUE="http://www.serveur.com/rep/choix1.html">choixun
<OPTION VALUE="http://www.serveur.com/rep/choix2.html">choixdeux
<OPTION VALUE="http://www.serveur.com/rep/choix3.html">choixtrois
<OPTION VALUE="http://www.serveur.com/rep/choix4.html">choixquatre
<OPTION VALUE="http://www.serveur.com/rep/choix5.html">choixcinq
</OPTION>
</OPTION>
</OPTION>
</OPTION>
</OPTION>

</SELECT>

<INPUT TYPE="button" NAME="bouton" VALUE="OK" onClick="window.location.href=document.liste1.choix.options[document.liste1.choix.selectedIndex].value">
</FORM>

Deuxième étape, ajustez le nombre de lignes qui commencent par "<OPTION VALUE= ..." selon le nombre de liens présents dans votre liste. N'oubliez pas d'ajouter le bon nombre de </OPTION> à la fin de vos choix de menu.

Remplacez les items en vert. Ce sont les adresses de vos liens. Remplacez aussi les mots en bleu. Ce sont les descriptions de vos liens. Ces descriptions s'affichent à l'écran, dans le menu déroulant.

Enfin, vous pouvez avoir plusieurs menus déroulants de ce type, sur une même page Web. Toutefois, vous devrez changer "liste1". Ce nom apparaît trois fois (en rouge) dans le code. Utilisez d'autres noms pour les nouvelles listes, comme "liste2", "liste3", etc...

©
Pédagogie Multimédia Conception