Un menu design en CSS

Cet article va vous permettre de faire un menu semblable à celui de seebz.be en CSS et qui soit aussi accessible pour les personnes utilisant un navigateur vocal.
Le menu est une image, ce qui permet de l'intégrer parfaitement au design de votre site.

Cette méthode n'est pas la plus facile mais a l'avantage de pouvoir avoir une police spéciale pour le texte du menu.

Le W3C recommande l'utilisation des balises ul et ol pour lister des éléments, or un menu est une liste de liens.
De plus le CSS nous permet de modifier l'affichage de ces éléments donc ça ne devrait pas nous poser trop de problème.

Le (x)HTML

Nous allons donc écrire notre menu à l'aide des balises ul :

<ul>
    <li><a href="page.htm">Accueil</a></li>
    <li><a href="page.htm">Blog</a></li>
    <li><a href="page.htm">Liens</a></li>
    <li><a href="page.htm">Contact</a></li>
</ul>

Vous pouvez voir le résultat sur le navigateur. Le menu sera affiché de cette manière si le visiteur à désactivé le CSS.
La présentation du menu se fera à l'aide du CSS mais pour cela nous devons d'abord identifier les liens.

Le XHTML ressemblera à ceci :

<ul id="menu">
    <li><a href="page.htm" id="accueil">Accueil</a></li>
    <li><a href="page.htm" id="blog">Blog</a></li>
    <li><a href="page.htm" id="liens">Liens</a></li>
    <li><a href="page.htm" id="contact">Contact</a></li>
</ul>

Ceci fait, nous allons créer notre image.

L'image

Nous allons créer notre menu avec le logiciel de création graphique préféré. Nous devons faire chaque bouton du menu avec ses 2 états (normal et hover), ainsi le bouton changera lorsque le curseur sera dessus.

Cette méthode permet de faire plus de 2 états mais nous n'en avons pas encore l'utilité.

Notre image ressemble à ceci:
menu

Elle fait 283 pixels de large et 80 pixels de haut. (le menu normal ne fera que 40 pixels de haut).
Ici la partie basse correspond au bouton en temps normal et la partie haute au bouton survolé par la souris.

Nous pouvons maintenant passer au CSS.

Le CSS

On commence par mettre les éléments de la liste sur une même ligne :

#menu                   { margin:0; padding:0; width:283px; }
#menu li                { margin:0; padding:0; display:inline; float:left; }

On va dimensionner chaque liens par rapport aux dimensions de l'image (par exemple, la largeur du bouton 'accueil' est de 78 pixels) et donner un background à chaque lien.

#menu a                 { height:40px; display:block; }

#menu #accueil          { width: 78px; background: url(menu.png) }
#menu #blog             { width: 58px; background: url(menu.png) }
#menu #liens            { width: 59px; background: url(menu.png) }
#menu #contact          { width: 88px; background: url(menu.png) }

L'exemple 2 nous montre le résultat (c'est pas très beau pour l'instant mais on n'a pas encore fini). On va ensuite enlever le texte et bien positionner le background pour chaque lien.

#menu a                 { height:40px; display:block; text-indent:-999px; overflow:hidden; }

#menu #accueil          { width: 78px; background: url(menu.png) 0 -40px; }
#menu #blog             { width: 58px; background: url(menu.png) -78px -40px; }
#menu #liens            { width: 59px; background: url(menu.png) -136px -40px; }
#menu #contact          { width: 88px; background: url(menu.png) -195px -40px; }

L'exemple 3 nous montre le résultat.

Que veulent dire ces -x px dans la propriété background ?

L'image ci-dessous vous permet de comprendre ce qui se passe:
explication

Il ne nous reste plus qu'a gérer le statut 'hover' (lorsque la souris est au dessus):

#menu                   { margin:0; padding:0; width:283px; }
#menu li                { margin:0; padding:0; display:inline; float:left; }
#menu a                 { height:40px; display:block; text-indent:-999px; overflow:hidden; }

#menu #accueil          { width: 78px; background: url(menu.png) 0 -40px; }
#menu #blog             { width: 58px; background: url(menu.png) -78px -40px; }
#menu #liens            { width: 59px; background: url(menu.png) -136px -40px; }
#menu #contact          { width: 88px; background: url(menu.png) -195px -40px; }

#menu #accueil:hover    { width: 78px; background: url(menu.png) 0 0; }
#menu #blog:hover       { width: 58px; background: url(menu.png) -78px 0; }
#menu #liens:hover      { width: 59px; background: url(menu.png) -136px 0; }
#menu #contact:hover    { width: 88px; background: url(menu.png) -195px 0; }

Et notre menu est fini, vous pouvez voir le résultat final ici.

Vous pouvez maintenant faire un beau menu pour votre site ;)

comments powered by Disqus