Un menu de navigation en liste déroulante

Introduction du cours

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.

Prérequis :

• bases en XHTML, dont les formulaires ;

• des connaissances en PHP et JavaScript facilitent la compréhension mais ne sont pas obligatoires.

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

Le principe

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

Attention !
Lorsque vous rédigez vos libellés d'option (entre <option> et </option>), ne rédigez pas de textes trop longs, sinon c'est tout le menu qui sera très large. Il n'existe pas de retour chariot (<br />) au sein de <option>.

Le fichier PHP de redirection

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.

• $_POST fait référence à la méthode d'envoi du formulaire : method="post".

• menu_destination fait référence au nom de l'information envoyée (valeur de l'attribut name de la balise <select>).

• L'instruction header("Location: ") envoie le visiteur vers une URL.

• else signifie "sinon" (cas dans lequel l'une ou l'autre condition n'est pas remplie).

Le complément JavaScript

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 formulairedocument.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.

Pour cette raison, vous ne devez pas vous passer du PHP dans l'utilisation de ce menu. En effet, si tel était le cas, le menu serait inaccessible et inutilisable pour de nombreux utilisateurs. Vous ne devez pas faire reposer quelque chose de si primordial que la navigation sur JavaScript.

Aller plus loin

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

Rendre le formulaire plus accessiblePré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 dans 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 ! :)

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : CSS HTML Web

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.