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