Version en ligne

Tutoriel : Un menu de navigation en liste déroulante

Table des matières

Un menu de navigation en liste déroulante
Le principe
Le code XHTML
Le fichier PHP de redirection
Le complément JavaScript
Aller plus loin

Un menu de navigation en liste déroulante

Le principe

Bonjour à toutes et à tous.

Aujourd'hui nous allons construire un menu de navigation qui a la forme d'un menu déroulant (balise <select>).

Ce type de menu est très pratique car il ne prend que peu de place. Nous verrons aussi ses limites.

Je m'appelle Mathias Poujol-Rost et publie ce tutoriel sous la licence Creative Commons BY-NC.

Le principe

Le code XHTML

Voilà comment ça marche : le menu est en fait un formulaire qui ne comporte qu'un seul champ (la destination).

Le visiteur choisit une option (balise <option>) parmi la liste proposée et appuie sur un bouton Go pour valider son choix, et ainsi aller à la page sélectionnée.

Comme tout formulaire, ses données nécessitent un traitement. Dans notre cas, nous allons faire une redirection en PHP. Celle-ci est réalisée depuis la page-cible du formulaire (valeur de l'attribut action de la balise <form>) vers la page sélectionnée par le visiteur.

Le PHP est un langage qui fonctionne sur le serveur de votre site. De nombreux hébergeurs proposent ce langage.

Vous n'avez pas besoin de comprendre le code que je vous donnerai pour l'employer. Je vous donnerai tout de même des explications, pour que me fassiez confiance. ^^

J'appelle cette page de redirection redirection_navigation.php. Le visiteur ne la voit pas car la redirection est effectuée sitôt que le visiteur arrive sur la page de redirection.


Le code XHTML

Le code XHTML

Le principe Le fichier PHP de redirection

Le code est très basique.

<form method="post" action="http://www.monsite.net/redirection_navigation.php">
<p>
<!-- une balise select ou input ne peut pas être imbriquée directement dans form -->
     <select name="menu_destination">
          <option value="http://www.monsite.net/accueil.html">Accueil</option>
          <option value="http://www.monsite.net/apropos.html">Qui sommes-nous ?</option>
          <option value="http://www.monsite.net/contact.html">Nous contacter</option>
          <option value="http://www.monsite.net/plan.html">Plan du site</option>
     </select>

     <input type="submit" value="Go" title="valider pour aller à la page sélectionnée" />

</p>
</form>

En ayant sélectionné une option de la liste et soumis le formulaire, l'internaute aura envoyé vers la page redirection_navigation.php son choix de navigation.
Il se présente sous la forme d'une information appelée menu_destination qui a pour valeur une des valeurs proposées (la valeur de l'attribut value de la balise <option>).

Les URL sont absolues, car le menu peut être présent sur n'importe quelle page du site.


Le principe Le fichier PHP de redirection

Le fichier PHP de redirection

Le code XHTML Le complément JavaScript

Une fois le choix envoyé, il faut le traiter, c'est-à-dire le reconnaître puis effectuer la redirection en fonction de ce choix (le respecter). C'est ce que fait la page qui effectue la redirection.

Cette page est un fichier PHP (.php) qui ne contient que le code suivant.
Copiez-le, collez-le dans un nouveau document et enregistrez ce document sous redirection_navigation.php.

Voici ce code :

<?php
/* on vérifie que l'information "menu_destination" existe ET qu'elle n'est pas vide : */
if ( isset($_POST['menu_destination']) && !empty($_POST['menu_destination']) ) 

/* si c'est bien le cas (existe ET non-vide à la fois), on redirige le visiteur vers sa valeur choisie de l'information "menu_direction" : */
     {header("Location: ".$_POST['menu_destination']."");}

/* sinon, on le redirige vers une autre page utile : */
else 
     {header("Location: http://www.monsite.net/plan.html");}
?>

Quelques explications pour celles et ceux qui ne comprennent rien au PHP.


Le code XHTML Le complément JavaScript

Le complément JavaScript

Le fichier PHP de redirection Aller plus loin

Il existe bien une autre méthode, dans laquelle JavaScript est utilisé au lieu de PHP (mais pas de la même façon).

Avec l'aide de Thunderseb, je vous présente ici une méthode qui combine PHP et JavaScript.

Le JavaScript est un langage dynamique qui permet d'ajouter de l'interactivité aux pages Web. Nous allons l'utiliser ici pour effectuer la redirection sans avoir à cliquer sur le bouton Go du formulaire.

Le principe de cette redirection en JavaScript

La redirection s'effectuera dès que l'internaute lâchera le bouton de sa souris, lors du clic pour sélectionner son option de destination. S'il navigue sans la souris, la redirection s'effectuera sitôt qu'il a fini de faire défiler les options. Il sera redirigé vers la destination dont l'option a reçu la focalisation (le "focus").

Cette méthode n'interfère pas avec le script PHP. Si le navigateur du visiteur n'interprète pas le JS, alors le visiteur sera redirigé grâce au script PHP.

Le script et son insertion dans le formulaire

document.location = this.options[this.selectedIndex].value

Nous le plaçons dans le formulaire, au moyen de l'évènement onchange, de la façon suivante :

<form method="post" action="http://www.monsite.net/redirection_navigation.php">
<p>
<!-- une balise select ou input ne peut pas être imbriquée directement dans form -->
     <select name="menu_destination" onchange="document.location = this.options[this.selectedIndex].value;">
          <option value="http://www.monsite.net/accueil.html">Accueil</option>
          <option value="http://www.monsite.net/apropos.html">Qui sommes-nous ?</option>
          <option value="http://www.monsite.net/contact.html">Nous contacter</option>
          <option value="http://www.monsite.net/plan.html">Plan du site</option>
     </select>

     <input type="submit" value="Go" title="valider pour aller à la page sélectionnée" />

</p>
</form>

Ce menu fonctionne donc que le JavaScript soit activé ou non dans le navigateur de l'internaute.


Le fichier PHP de redirection Aller plus loin

Aller plus loin

Le complément JavaScript

Vous disposez des codes pour réaliser ce menu, mais il est largement possible de l'améliorer.

Rendre le formulaire plus accessible

Préciser une étiquette

Une étiquette (balise <label>), c'est un texte lié à un champ de formulaire. Il est très important car il permet d'indiquer quelle information saisir ou, comme dans notre cas, quelle est l'information que l'on choisit. En cliquant sur ce texte, la focalisation se place dans le champ. Voici comment procéder dans notre cas :

<label for="menu_destination_liste">Navigation</label> 
<select name="menu_destination" id="menu_destination_liste"> 
     <option value="http://www.monsite.net/accueil.html">Accueil</option> 
     <option value="http://www.monsite.net/apropos.html">Qui sommes-nous ?</option> 
     <option value="http://www.monsite.net/contact.html">Nous contacter</option> 
     <option value="http://www.monsite.net/plan.html">Plan du site</option> 
</select>

Le libellé "Navigation" pourrait être plus original. Par exemple : "Choisissez votre destination".

Grouper les options

Si vous proposez de nombreuses options, il est nécessaire de les grouper. Une longue liste est ennuyeuse et peu pratique.
Pour grouper plusieurs options, il faut entourer plusieurs <option> par <optgroup> comme dans l'exemple suivant :

<select name="menu_destination"> 
<optgroup label="le site">
     <option value="http://www.monsite.net/accueil.html">Accueil</option> 
     <option value="http://www.monsite.net/apropos.html">Qui sommes-nous ?</option> 
     <option value="http://www.monsite.net/contact.html">Nous contacter</option> 
     <option value="http://www.monsite.net/plan.html">Plan du site</option> 
</optgroup>
<optgroup label="rubriques">
     <option value="url_1">Catégorie 1</option> 
     <option value="url_2">Catégorie 2</option> 
     <option value="url_3">Catégorie 3</option> 
</optgroup>
</select>

Quand il y a un groupement <optgroup>, il est souvent affiché en gras et italique (cela dépend des navigateurs), les options ayant une marge gauche. Note : la valeur de l'attribut label ne peut pas contenir de balisage.

Proposer une option par défaut

Une des recommandations d'accessibilité est de proposer une valeur par défaut pour n'importe quel champ de formulaire (WCAG 1, point de contrôle n°10.4 de priorité 3). Pour notre liste, il suffit d'ajouter selected="selected" à l'option que vous voulez définir par défaut, comme ceci :

<option value="URL" selected="selected">Libellé</option>

Si cela n'est pas précisé, c'est la première option de la liste qui sera affichée en premier.

Donner un style CSS plus original

Tel quel, ce menu ressemble à un banal formulaire. Lui donner un meilleur style est un plus.

Par exemple, pour remplacer le bouton d'envoi par une image, remplacez

<input type="submit" value="Go" title="valider pour aller à la page sélectionnée" />

par

<input type="image" src="../images/bouton_valider_go.png" alt="Go" title="valider pour aller à la page sélectionnée" />

La valeur de alt est importante : ce texte sera affiché si l'image n'est pas disponible ou son affichage désactivé. De plus, il est perçu par les non-voyants, qui peuvent ainsi utiliser ce formulaire.

Rappel : un formulaire est un élément de type bloc. Pour le positionner dansdans le flux, vous pouvez utiliser la déclaration CSS suivante :

form {display: inline;}

Vous pouvez désormais proposer ce type de menu à vos visiteurs.

Utilisez-le à bon escient.

À bientôt ! :)


Le complément JavaScript