A propos du code HTML

Un menu n'est rien d'autre qu'une liste de liens. Alors par pitié, tenez-vous en aux listes HTML et ne dérivez pas sur des tableaux et autres aérations du genre. On peut tout faire avec des listes !

On se basera donc dans tous les exemple sur le code HTML suivant :

<ul id="mymenu">
    <li><a href="http://example.org/ma-page-1.html" title="Ma description">Menu 1</a></li>
    <li><a href="http://example.org/ma-page-2.html" title="Ma description">Menu 2</a></li>
    <li><a href="http://example.org/ma-page-3.html" title="Ma description">Menu 3</a></li>
    <li><a href="http://example.org/ma-page-4.html" title="Ma description">Menu 4</a></li>
    <li><a href="http://example.org/ma-page-5.html" title="Ma description">Menu 5</a></li>
</ul>

Menus horizontaux

On commence de suite avec les menus horizontaux. C'est de loin la partie la plus intéressante puisque par défaut les listes sont affichées verticalement et ce qui poussent certains à s'en remettre aux tableaux c'est justement ce point. Mais ne vous y trompez pas, on peut très bien remettre une liste en affichage en ligne plus ou moins facilement selon la méthode.

Méthode display inline

Cette méthode est on ne peut plus simple. Elle consiste à changer le display des éléments li de notre liste pour inline. En CSS ça nous donne :

ul#mymenu li {
    display:inline;
}
 
ul#mymenu {
    /* Vous pouvez ensuite appliquer un text-align
        pour aligner les éléments de la liste à votre
        guise */
    text-align:center;
 
  /* On enlève le style par défaut */
  margin:0;
  padding:0;
  list-style:none;
 
}

J'attire votre attention sur les éléments de type inline, vous devez maintenant prendre en compte les espaces significatifs. Autrement dit, l'espacement dans le code HTML entre chaque élément <li> et </li> va générer un seul et unique espace à l'affichage. Seule solution pour le supprimer, ne laisser aucun espace entre vos éléments de liste, pas même un retour à la ligne.

Vous avez maintenant votre liste en ligne mais aucune éléments de type block. Vous ne pouvez donc pas donnez des dimensions aux éléments du menu pour obtenir des rectangles mais vous pouvez parfaitement jouer avec le padding des éléments <a>. Une démonstration.

Méthode avec des flottant

Nous allons utiliser la propriété CSS float qui permet de faire flotter les éléments à droite ou à gauche de leur conteneur. Ceci aura comme effet secondaire de les sortir du flux de la page. Nous reviendrons sur ce point un peu plus tard.

ul#mymenu {
  /* On enlève le style par défaut */
  margin:0;
  padding:0;
  list-style:none;
}
 
ul#mymenu li {
    /* On fait flotter les éléments de la liste à gauche */
    float:left;
 
  /* on peut maintenant passer nos <li> en
        block pour plus de confort */
  display:block;
}

Comme je le disais plus tôt, les éléments de votre liste sont sortis du flux de la page puisqu'ils sont désormais flottant. Pour que le placement du contenu qui le suit soit effectué correctement, il existe plusieurs solution :

  • Appliquer un clear:left à l'élément suivant la liste.
  • Donner une hauteur à la liste pour qu'elle englobe ses éléments.

Vous trouverez aussi pas mal d'informations à ce propos par ici. Je vous propose aussi une démonstration du résultat par ici.

Menus verticaux

Pas de complication particulière pour la création de menus verticaux puisque c'est le mode d'affichage par défaut des listes HTML. N'oubliez toutefois pas de supprimer les puces et les marges qui existent par défaut quand vous n'en voulez pas :

ul#mymenu {
  /* On enlève le style par défaut */
  margin:0;
  padding:0;
  list-style:none;
}

Plein de menus CSS

Je vous propose plusieurs endroits ou vous en trouverez :