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…
<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 ».