[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> XHTML / CSS
> Un menu de navigation en liste déroulante
> Lecture du tutoriel
Un menu de navigation en liste déroulante
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
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.
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 est très basique.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <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>.
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 :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11 | <?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).
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
Code : JavaScript1 | 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 :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <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.
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 :
Code : HTML1
2
3
4
5
6
7 | <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 :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <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 :
Code : HTML1 | <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
Code : HTML1 | <input type="submit" value="Go" title="valider pour aller à la page sélectionnée" />
|
par
Code : HTML1 | <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 :
Code : CSS
Vous pouvez désormais proposer ce type de menu à vos visiteurs.
Utilisez-le à bon escient.
À bientôt !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
.
408 Zéros connectés |
9 requêtes |
0.0213s (0.0107s)
