Réaliser un menu déroulant

Cette page-ci montre comment construire un menu déroulant. Selon nos conventions, les encadrés rouge pâle et vert pâle contiennent respectivement du code HTML et CSS ; le CSS peut être modifié, pour vérifier le rôle de chaque règle. Le bouton bleu situé en bas vous permet de visualiser l'effet de chaque modification (s'il se passe des choses bizarres, c'est qu'il y a des erreurs quelque-part dans les modi­fi­ca­tions que vous avez faites). Vous pouvez réinitialiser le code n'importe quand en poussant la touche « F5 » du clavier. Le menu déroulant généré par le code est situé en dessous.

Le code et le menu

<ul class="menu">
  <li>Propriété :</li>
  <li class="drop_down">propriété 1
    <ul class="dd_list">
      <li>valeur 1</li>
      <li>valeur 2</li>
      <li>valeur 3</li>
      <li>valeur 4</li>
      <li>valeur 5</li>
    </ul>
  </li>
  <li class="drop_down">propriété 2
    <ul class="dd_list">
      <li>valeur 1</li>
      <li>valeur 2</li>
      <li>valeur 3</li>
    </ul>
  </li>
  <li class="drop_down">propriété 3
    <ul class="dd_list">
      <li>valeur 1</li>
      <li>valeur 2</li>
      <li>valeur 3</li>
      <li>valeur 4</li>
    </ul>
  </li>
</ul>

Cliquez le bouton pour tester le CSS. Pour réinitialiser, appuyez sur la touche « F5 ».

Testez le CSS
  • Propriété :
  • propriété 1
    • valeur 1
    • valeur 2
    • valeur 3
    • valeur 4
    • valeur 5
  • propriété 2
    • valeur 1
    • valeur 2
    • valeur 3
  • propriété 3
    • valeur 1
    • valeur 2
    • valeur 3
    • valeur 4

Comment ça marche ?

Voici les étapes pour générer le menu :

Étape #1 : La première chose à faire est de créer la barre du menu. Cela est fait en utilisant une liste non-ordonnée. Comme nous voulons que les éléments de la liste soient disposés horizontalement plutôt que verticalement, nous utilisons la déclaration « display: inline-block; » pour « .menu>li ». Ceci a aussi pour effet d'éliminer les puces¹. Pour éviter le déportement à droite associé aux listes, nous utilisons également la déclaration « padding-left: 0; » pour « .menu ».

Étape #2 : Il faut ensuite créer les listes du menu déroulant. Ceci se fait également en utilisant des listes non-ordon­nées. La partie la plus importante du code est constituée des déclarations « display: none; » pour « .dd_list » et « display: block; » pour « .drop_down:hover .dd_list ». Ce sont elles qui font que les listes restent cachées en temps nor­mal, mais qu'elles apparaissent lorsque la souri est au-dessus de « propriété 1 », « propriété 2 », etc. De nouveau nous utilisons la décla­ra­tion « padding-left: 0; » pour éviter un déportement à droite. Nous utilisons également la décla­ra­tion « list-style-type: none; » pour éliminer les puces².

La déclaration « position: absolute; » pour « .dd_list » est nécessaire pour assurer que les articles du menu ne se déplacent pas lorsque les listes apparaissent. La règle « .drop_down { position:relative; } » est option­nel­le ; elle est là au cas où on voudrait positionner les listes déroulantes.

Le reste du code est là pour des raisons cosmétiques.

Étape #3 : Pour un menu de navigation, la fonctionalité serait obtenue tout simplement en insérant des hyperliens dans les listes déroulantes. Pour un autre type de menu, il faudrait faire appel à du JavaScript.

______________________________________________________________________________

¹ Si on voulait garder les puces, on pourrait plutôt utiliser la déclaration « float: left; » pour « .menu>li ».

² Le même résultat peut être obtenu avec la déclaration « display: block; » pour « dd_list li ».

Accueil