Menu déroulant

retour

Le menu déroulant permet une orientation vers une nouvelle page ou vers une ancre dans la page (ou la combinaison des deux).

Le problème est sa gestion. Il est possible et simple d'utiliser pour cela un script javascript. Celui-ci doit toutefois être adapté à chaque cas particulier.

Gestion par Javascript :

ce premier menu déroulant est géré par son nom MD1 (au lieu de this) et affiche le n° sélectionné lors de lÕutilisation grâce à .selectedIndex s'appliquant à MD1.

onchange gère l'évènement de sélection et déclenche l'action.

<P><SELECT NAME="MD1"
onchange="alert('\nvaleur index du menu sélectionné : '+MD1.selectedIndex);">
<OPTION>souris
<OPTION>clavier
<OPTION SELECTED>premier menu déroulant
</SELECT></P>

ce deuxième menu déroulant est géré par this et affiche le n° sélectionné lors de l'utilisation et la valeur correspondante.

<P><SELECT NAME="NOM"
onchange="alert(t1+this.selectedIndex+' nom : '+this.options[this.selectedIndex].value);">
<OPTION SELECTED>deuxième menu déroulant
<OPTION VALUE="souris.html">souris
<OPTION VALUE="clavier.html">clavier
</SELECT></P>

ce troisième menu déroulant est géré par this et ouvre le fichier spécifié dans lÕarticle choisi si son n° est différent ( !=) de 0.

<P><SELECT NAME="NOM"
onchange="if (this.selectedIndex!=0) window.location.href=this.options[this.selectedIndex].value;">
<OPTION SELECTED>troisième menu déroulant
<OPTION VALUE="souris.html">souris
<OPTION VALUE="clavier.html">clavier
</SELECT></P>

Pour gérer votre menu :

Recopier le script (par copier coller).

Modifier le nom suivant <OPTION SELECTED>

Modifier les URL suivant <OPTION VALUE avec éventuellement des ancres dans le texte.

Modifier les noms associés aux articles de menu.

REMARQUE : la gestion des cadres (frames) est possible en mofidiant le script de la façon suivante :

onchange="if (this.selectedIndex!=0) parent.frames[1].location.href=this.options[this.selectedIndex].value;">

Le cadre 1 (après le 0) affiche l'URL demandée.

retour