Aller au menu - Aller au contenu

Icône Un menu de navigation en liste déroulante

Par Avatar rainbowspiky
Mise à jour : 22/08/2008
Difficulté : Facile Facile
346 visites depuis 7 jours, classé 304/786
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 Creative Commons BY-NC.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

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.
Retour en haut

Le code XHTML

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>.
Retour en haut

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 : 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).
Retour en haut

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 formulaire



Code : JavaScript
1
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.
Retour en haut

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 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 : HTML
1
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 : HTML
1
<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 : HTML
1
<input type="submit" value="Go" title="valider pour aller à la page sélectionnée" />
par Code : HTML
1
<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
1
form {display: inline;}
Retour en haut
Vous pouvez désormais proposer ce type de menu à vos visiteurs.

Utilisez-le à bon escient.

À bientôt ! :)
Retour en haut

Partager

Retour en haut
20 commentaires pour "Un menu de navigation en liste déroulante"
Note moyenne : 2.50 / 4 (6 votes)
Pseudo Commentaire
Hors ligne gokuan # Posté le 22/03/2009 à 16:35:46
Avatar

 Le tuto est bien, une bonne idée pour la redirection.

Cependant je n'ai pas bien compris la technique pour que le bouton "Go" ne s'affiche pas lorsque l'internaute a le javascript activé, quelqu'un pourrait être plus explicite ?
Hors ligne Librius # Posté le 17/08/2009 à 20:19:04

Bonjour,

Pour ma part, je mets aussi !empty($mavariable).
Sinon pour le PROBLEME du bouton :
- Si la personne n'a pas javascript d'activé, la personne a un formulaire avec un bouton GO.
Formulaire classique (première partie)
- Si la personne a javascript d'activé : le bouton Go n'a aucun intérêt vu que la personne va être redirigé en sélectionnant une option, d'où le fait de ne pas mettre de bouton ce qui pourrait troubler l'internaute.

Petite question : pourquoi ne pas mettre onclick comme propriété javascript ?

Des pages de test pour constater les différences ne seraient pas de refus !
Hors ligne Heuzef # Posté le 27/07/2010 à 21:43:04
www.heuzef.com
Avatar

Avis : Bon

Ville : Bordeaux
Pays : France métropolitaine

 Merci pour ce tuto ^^

Il m’a bien aidé ;)
Image utilisateur
 
Hors ligne lau13 # Posté le 13/06/2011 à 17:50:08
Avatar

 bonjour, merci pour ce tuto!
je m'en vais poser une question sur le forum!
:o zéro mais pas trop! :colere2:
 
Hors ligne devra # Posté le 10/11/2011 à 17:19:19

bonjour, merci beaucoup pour cet article ! mais j'ai besoin d'aide et j'espere que quelqu'un peux m'aider.
je sais comment faire pour un menu multiple, j'ai coller mon script dessous, mon probleme, c'est que je veux savoir comment faire afin que la liste / resultat s'affiche dans la meme page,
cela veux dire si je selectionne Acceuil par exemple, je ne veux pas qu'un deuxieme menu s'affiche mais plutot une liste, et je veux que cette liste soit affiche dans la meme page

par exemple
le menu de navigation soit par exemple
page 1
page 2
page 3
et quand je selectionne page 1, je veux que sur la meme page une liste 'affiche dessous, et en selectionnant page 2 une nouvelle liste s'affiche.

voila ce que j'ai , c'est un multiple menu de navigation , merci d'avance :
<html>



<head>

<!-- ####################### start copying the HEAD code(DMA) here ####################### -->

<script language="javascript">

<!--//

//new Option("text","value")

//this code changes menus







function nullOptionsDMA(aMenu){

var tot=aMenu.options.length

for (i=0;i<tot;i++)

{

aMenu.options[i]=null

}

aMenu.options.length=0;

}



function MySubjectDMA0(aMenu){

nullOptionsDMA(aMenu)



with (aMenu){



//Rewrites the text and values

options[0]=new Option("selectionner","none");

options[1]=new Option("test1","../HTMLGuide/CellProperties.htm");

options[2]=new Option("test2","../HTMLGuide/CellProperties.htm");

options[3]=new Option("test3","../HTMLGuide/CellProperties.htm");

options[4]=new Option("test4","../HTMLGuide/CellProperties.htm");



options[0].selected=true





}

}

function MySubjectDMA1(aMenu){

nullOptionsDMA(aMenu)



with (aMenu){



//Rewrites the text and values

options[0]=new Option("Select a page","none");

options[1]=new Option("Onload and OnUnload Alerts","alertOnLoad.htm");

options[2]=new Option("Prompts for Input","alertPrompts.htm");

options[3]=new Option("Alerts","alerts.htm");

options[4]=new Option("Creating image buttons","alertsImages.htm");

options[5]=new Option("Text Alerts","alertsText.htm");



options[0].selected=true





}

}

function MySubjectDMA2(aMenu){

nullOptionsDMA(aMenu)



with (aMenu){



//Rewrites the text and values

options[0]=new Option("Select a page","none");

options[1]=new Option("Pop-up alert code in java script","../JavaScript2/alertCode.htm");

options[2]=new Option("Java Script Tutorial - Appending Text","../JavaScript2/appendingText.htm");

options[3]=new Option("Java Script Tutorial - Appending Text 2","../JavaScript2/appendingText2.htm");

options[4]=new Option("Simple Arrays in JavaScript","../JavaScript2/array.htm");

options[5]=new Option("Changing background colour (bgColor) in java script","../JavaScript2/changingBgColor.htm");



options[0].selected=true





}

}

function MySubjectDMA3(aMenu){

nullOptionsDMA(aMenu)



with (aMenu){



//Rewrites the text and values

options[0]=new Option("Select a page","none");

options[1]=new Option("Alignment in Cascading Style Sheets","../StyleSheets/alignment.htm");

options[2]=new Option("Anchors in Cascading Style Sheets","../StyleSheets/anchors.htm");

options[3]=new Option("Bullets","../StyleSheets/bullets.htm");

options[4]=new Option("Class Selectors","../StyleSheets/class.htm");

options[5]=new Option("Creating Style Sheet Files","../StyleSheets/CreatingStyleSheetFiles.htm");



options[0].selected=true





}

}

/* ####################### goDM() ####################### */



function goDMA(aMenu){

if (aMenu.options.value!="none")

{

location=aMenu.options[aMenu.selectedIndex].value

}



}



/* ####################### setUp ####################### */



function setUpDMA(){

with (document.formDoubleMenuDMA) {

if (menuSubjectsDMA.selectedIndex==0){

menuSubjectsDMA.options[0].selected=true

menuFilesDMA.options[0].selected=true

}



if (menuSubjectsDMA.selectedIndex==1)

MySubjectDMA0(menuFilesDMA)

if (menuSubjectsDMA.selectedIndex==2)

MySubjectDMA1(menuFilesDMA)

if (menuSubjectsDMA.selectedIndex==3)

MySubjectDMA2(menuFilesDMA)

if (menuSubjectsDMA.selectedIndex==4)

MySubjectDMA3(menuFilesDMA)



}

}



/* ####################### changeFiles ####################### */



function changeFilesDMA(){

aMenu=document.formDoubleMenuDMA.menuSubjectsDMA

aMenu2=document.formDoubleMenuDMA.menuFilesDMA

with (aMenu){



switch (selectedIndex) {

case 0:

aMenu2.options.length=0;

aMenu2.options[0]=

new Option("Pages appear here","none")

aMenu2.options[0].selected=true;

history.go(0)

break

case 1:

MySubjectDMA0(aMenu2)

aMenu2.options[0].text="selectionner"

break

case 2:

MySubjectDMA1(aMenu2)

aMenu2.options[0].text="JavaScript Subjects"

break

case 3:

MySubjectDMA2(aMenu2)

aMenu2.options[0].text="JavaScript 2 Subjects"

break

case 4:

MySubjectDMA3(aMenu2)

aMenu2.options[0].text="Style Sheet Subjects"

break



}

}



}

//-->

</script>

<!-- ####################### end copying code (DMA) from the HEAD ####################### -->

</head>

<!-- ####################### don't forget to copy the body code! ####################### -->

<body onLoad="setUpDMA()">



<!-- ####################### copy the code below to where you want the menu to appear ####################### -->



<form name="formDoubleMenuDMA" >



<p><font size="2">Select a subject and then a page to go!</FONT>:<br>



<!-- This menu holds the subjects-->

<select name="menuSubjectsDMA" onChange="changeFilesDMA()">

<option value="none" >selectionner l'exemple

<option value="">exemple1

<option value="">exemple2

<option value="">exemple3

<option value="">exemple4

</select>

<!-- this menu holds the files to go-->

<select name="menuFilesDMA" onChange="goDMA(this)" style="width:300">

<option value="none"> Pages appear here







</select>







<p>



</form>

<!-- ####################### stop copying the menu code (DMA) here ####################### -->



</body>



</html>

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.