Liens dans une liste déroulante

A la place d'une série de liens, on peut mettre ces liens dans une liste déroulante. Cela a comme avantage de réduire la place utilisée pour mettre votre liste.

Comment cela fonctionne?

On peut utiliser 2 façons de faire :

choisir un lien et cliquer sur un bouton. On utilise alors l'événement onClick.
aller directement sur le lien choisit dès qu'on en choisit un grâce à onChange.

Dans les 2 cas, le code est le même.

Le code

<html>
<head>
<title>Exemple de liens dans une liste déroulante</title>
<script LANGUAGE="JavaScript">

</script>
</head>
<body>
<form NAME="formListe">
<select NAME="liste" onChange="change()" size="1">
    <option value="aucun"> Choisissez un lien </option>
    <option value="home.html">Home</option>
    <option value="contact.html">Contact</option>
    <option value="javascript.html">JavaScript</option>
    <option value="http://www.altavista.com">Altavista</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>
</form>
</body>
</html>

Voici un peu plus d'explications :

window.location : on attribue à la fenêtre une nouvelle URL. Ici, la destination va s'afficher dans la frame. Pour afficher la nouvelle page dans l'entièreté de la fenêtre, il suffit de mettre ceci : window.parent.location
<option value="page_de_destination"> nom qui va apparaître dans la liste</option>
Dans value, vous mettez la page ou le site de destination.

Dans l'exemple ci-dessous, la destination va s'afficher dans une boîte de dialogue.