Un menu horizontal facilement en HTML/CSS

Plusieurs CMS tels WordPress ou Joomla! incorporent des menus dans leurs fonctionnalités. Pour une personne créant un thème sur ces plates-formes, il peut être apeurant de faire un menu horizontal étant donné que ce qui est envoyé comme code HTML est une simple liste. N’ayez crainte, il suffit d’une ligne pour arranger cela…

Pour commencer, voici ce à quoi ressemble une liste:

<ul class="menuHoriz">
<li>Premier</li>
<li>Second</li>
<li>Troisième</li>
</ul>

Cela affiche:

  • Premier
  • Second
  • Troisième

Pour la rendre horizontal, il suffit de dire que les items (li) de la liste ayant la classe (menuHoriz) doivent être affichés « en-ligne » donc un à côté de l’autre. Par défaut, l’affichage est « list-item » si jamais vous désirez revenir en arrière. Pour ce faire, vous écrivez dans la section « head »:

<style>
ul.menuHoriz li {
	display: inline;
}
</style>

Avec cela, vous avez maintenant un menu comme celui-ci:

  • Premier
  • Second
  • Troisième

Vous voyez que les items sont à l’horizontal, mais un peu trop collés. Vous pouvez les distancer avec un padding à gauche et à droite. Le style changerait pour cela:

<style>
ul.menuHoriz li {
	display: inline;
	padding-left: 20px;
	padding-right: 10px;
}
</style>

Voilà, c’est tout! Vous devez par contre savoir que cette technique à une limitation et c’est qu’on ne peut pas modifier les points précédents les items puisqu’en « inline », il n’y a pas de points. Les propriétés « list-style-type » et « list-style-image » sont valides seulement sur un « display: list-item ».