Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les pr√©conisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Faire un menu accessible en CSS

Voici un m√©thode simple et pratique pour cr√©er de A √† Z son menu en CSS proprement. Fini les 28 images gif servant √† cr√©er tout les effets d’un menu r√©actif avec des noms barbares finissant par des _04 ou _12. Ce proc√©d√© poss√®de d’√©normes avantages : il permet de concentrer la totalit√© de son menu dans un seul document Photoshop, √©vite de dupliquer 36 fois la modification d’un effet sur 12 documents, √©vite la surpopulation des fichiers images, procure non pas un pr√©chargement d’image mais un chargement unique d’image, esquive les JavaScripts foireux, etc. Bref ! l’essayer c’est l’adopter !

Préparons notre menu dans Photoshop. Dessinez, créez votre menu à votre guise en prenant soin de placer votre création dans un dossier de calques spécifique.

Une fois votre menu créé, tracez les repères (Ctrl+R). Les repères verticaux se placent librement, tandis que les horizontaux doivent être obligatoirement equidistants.

Dupliquez trois fois votre dossier de calques en les renommant (personellement je les nomme suivant leur statut, :link, :visited, :hover et :active) et déplacez chacun des dossiers dans une rangée crée avec les repères.

Cr√©ez chacun de vos effets, d√©placement, surbrillance, apparition d’ic√īne, changement de police, bref tout ce qu’il vous pla√ģt !

Une fois votre menu pr√™t, il faut l’int√©grer !


Il suffit tout d’abord de cr√©er un menu en XHTML simplement :

[html] <ul> <li><a href="test_01.html">Accueil</a></li> <li><a href="test_02.html">Présentation</a></li> <li><a href="test_03.html">Forum</a></li> <li><a href="test_04.html">Contact</a></li> </ul>

Puis, ajoutez des identifiants pour pouvoir agir en CSS et des <span> afin de faire dispara√ģtre visuellement les textes.

[html] <ul id="menu"> <li id="menu_accueil"><a href="test_01.html"><span>Accueil</span></a></li> <li id="menu_presentation"><a href="test_02.html"><span>Présentation</span></a></li> <li id="menu_forum"><a href="test_03.html"><span>Forum</span></a></li> <li id="menu_contact"><a href="test_04.html"><span>Contact</span></a></li> </ul>

Vous voyez donc exactement la même chose que ce que verra un internaute utilisant un navigateur qui ne prend pas en compte les CSS.

Dans le cas présent, nous souhaitons un menu horizontal. Il faut donc redéfinir quelques balises.

Premièrement, effacez les marges automatiques des éléments <ul> et <li>. Passez les <li> en élément block flottant avec une hauteur fixe.

Les liens doivent également passer en type block avec la même hauteur que les <li> afin que le lien recouvre entièrement la surface du bouton.

Personellement j’ajoute souvent des bordures aux √©l√©ments lors de la cr√©ation pour me rep√©rer plus facilement. Ici sur les <li>.

[css] ul#menu { 	margin:0; } ul#menu li { 	display:block; 	float:left; 	height:65px; 	margin:0; 	border:1px solid #F00; } ul#menu a { 	display:block; 	height:65px; }

Notre menu se forme petit à petit.

A pr√©sent il est temps d’ins√©rer notre image.

Pour cela, il suffit d’appliquer l’image en fond √† tous les liens puis def√©nir les largeurs exactes de tous les items du menu.

Par la m√™me occasion, on en profite pour faire dispara√ģtre les textes gr√Ęce aux <span>.

[css] ul#menu a { 	display:block; 	height:65px; 	background:url(menu.png) 0 0 no-repeat; } ul#menu span { 	display:none; } ul#menu li#menu_accueil 	{width:135px;} ul#menu li#menu_presentation 	{width:200px;} ul#menu li#menu_forum 		{width:114px;} ul#menu li#menu_contact 	{width:133px;}

Positionnons exactement chacun des items. Dans Photoshop, mesurez l’espace √† partir de la gauche de chaque item puis appliquez-la en valeur n√©gative au positionnement du fond.

Rappel : background-position: (distance à partir de la gauche)px (distance à partir du haut)px.

[css] ul#menu li#menu_presentation a:link	{background-position:-135px 0;} ul#menu li#menu_forum a:link		{background-position:-335px 0;} ul#menu li#menu_contact a:link		{background-position:-449px 0;}

A noter : inutile de placer le premier item car le positionnement par défaut est son propre positionnement.

Hop ! chaque item est maintenant positionné !

Maintenant mettons en place la réactivité des boutons.

[css] ul#menu li#menu_accueil a:hover		{background-position:0 -65px;} ul#menu li#menu_presentation a:hover	{background-position:-135px -65px;} ul#menu li#menu_forum a:hover		{background-position:-335px -65px;} ul#menu li#menu_contact a:hover		{background-position:-449px -65px;}

Pour l’effet de survol, le positionnement √† partir du haut sera toujours de 65px car on se d√©cale d’un cran pour se situer sur la zone de l’image consacr√©e au :hover.

[css] ul#menu li#menu_accueil a:active	{background-position:0 -130px;} ul#menu li#menu_presentation a:active	{background-position:-135px -130px;} ul#menu li#menu_forum a:active		{background-position:-335px -130px;} ul#menu li#menu_contact a:active	{background-position:-449px -130px;}

Pour l’effet au moment du clic, le positionnement √† partir du haut sera toujours de 130px (65px × 2) car on se d√©cale de deux crans pour se situer sur la zone de l’image consacr√©e au :active.

[css] ul#menu li#menu_accueil a:visited	{background-position:0 -195px;} ul#menu li#menu_presentation a:visited	{background-position:-135px -195px;} ul#menu li#menu_forum a:visited		{background-position:-335px -195px;} ul#menu li#menu_contact a:visited	{background-position:-449px -195px;}

Pour l’effet au moment du clic, le positionnement √† partir du haut sera toujours de 195px (65px × 3) car on se d√©cale de trois crans pour se situer sur la zone de l’image consacr√©e au :visited.

Attention ! N’oubliez pas de placer vos √©venements dans l’ordre : link, visited, hover puis active (moyen mn√©mo-technique : LoVe HAte).


Et voilà ! Votre nouveau menu top moumoute est prêt !

Le résultat est par ici


Ce que nos lecteurs en disent :

  1. an.archi

    Salut !

    Malheureusement, l’emploi de "display: none" rend le menu justement compl√®tement inaccessible dans pas mal de cas, apparemment.
    √Ä terme, tu aboutis m√™me √† une compl√®te disparition du menu pour les lecteurs d’√©cran. :)

    Je te laisse lire deux articles de Laurent Denis à ce sujet :
    blog-and-blues.org/weblog…
    blog-and-blues.org/weblog…

    D√©finitivement, ce monde n’est pas parfait. ;)

  2. Shemu

    Salut an.archi ;)

    J’ai employ√© une m√©thode qui me parait la plus simple et la plus compr√©hensible pour le tuto… Il est s√Ľr que ce n’est pas la meilleure m√©thode.

    Mais "dans le meilleur des mondes" un display ou un visibility ne serait pas pris en compte par un navigateur texte…

    Si l’on veut √™tre s√Ľr de r√©aliser ce tuto en totale accessibilit√©, je vous conseille effectivement comme an.archi de vous reporter √† ces articles de Blog & Blues. ;-)

  3. an.archi

    (en fait, c’√©tait surtout pour dire que le titre de ce post devrait plut√īt se situer dans le domaine de la validit√© par rapport aux sp√©cifications des standards que d’une r√©elle accessibilit√©, du coup.
    Aller, je cesse de faire mon emp√™cheur de tourner en rond pour la journ√©e…

  4. Shemu

    Ark ! Oui c’est juste ;-)

  5. M0uTe

    salut! moi j’ai suivi le tuto et je suis arriv√© √† √ßa :
    m0ute.free.fr/index.html

    vous en pensez quoi?

  6. Shemu

    Bin c’est pas mal du tout !

  7. M0uTe

    merci :)

  8. Chmel

    Bonjour,
    il est possible de rendre ce menu accessible aux lecteurs d’√©cran et aux navigateurs avec images d√©sactiv√©es :
    en cachant les textes alternatifs par les images au lieu du "display:none".

    1 – D√©placer les textes "accueil, presentation …" dans les √©l√©ments LI et supprimer les tags span, le HTML :
    <ul id="menu">
    <li id="menu_accueil">Accueil<a href="http://www.google.fr/">&...
    <li id="menu_presentation">Présentation<a href="http://www.yahoo.fr/">&l...
    <li id="menu_forum">Forum<a href="http://www.php.net/">&lt...
    <li id="menu_contact">Contact<a href="http://www.w3.org/"><...
    </ul>
    2 РModifier le style, de manière à ce que les éléments A supperposent les éléments LI :
    #menu a{position:relative;margin-top:-35px}

    Style à supprimer :
    ul#menu span {
    display:none;
    }
    Voil√†, c’est tout. Pour tester :
    perso.wanadoo.fr/michel.d…

    Tester sans images avec IE :
    Menu/Outils/Options internet../avanc√©/Multim√©dia/Afficher les images √† d√©cocher. Cliquer sur OK et recharger la page…

  9. robby

    voici, pour ceux que cela intéresse, ma version des faits de cette technique dite de "rollover" (menu css):
    http://www.nekodesign.net/?/Webd...

  10. Wite

    je voudrais juste dire que pour faitre des menus tu peux prendre un lmogiciel qui s’apelle lab et qui est beaucoup plus facile que ca sinon tr√©s bon tut!

  11. paco

    Au lieu de chercher des complications , autant faire des menus avec flash…je trouve ca a la limite beaucoup plus simple^^

  12. grunchy

    Finalement fallait que je me creuse un peu la tête, par contre selon les navigateurs les images ne ressortent pas de la même manière et jamais comme je veux, si vous avez un conseil je suis prenneur! merci

  13. grunchy

    Finalement c’est tu tout bon, je vous laisse d√©couvrir : natan.kerbellec.free.fr

  14. boudouba

    salut, déjà merci pour ce tutoriel bien sympathique!
    j’ai un l√©ger probl√®me, c’est que lorsque que je redimentionne la fenetre de mon navigateur les boutons du menu reviennent √† la ligne. J’aimerais savoir ce qu’il faut faire pour rem√©dier a √ßa car cela fait bugger mon menu sous mozilla et j’ai un bouton qui revient √† la ligne.
    Merci

  15. Greg-J

    "Premièrement, effacez les marges automatiques des éléments <ul> et <li>. Passez les <li> en élément block flottant avec une hauteur fixe.

    Les liens doivent également passer en type block avec la même hauteur que les <li> afin que le lien recouvre entièrement la surface du bouton."

    est-il possible d’avoir un peu plus de d√©tails sur ce passage l√†… Effacer les marges automatiques,ok, mais apr√®s je suis plus :s

  16. Khalil

    Bonjour,

    Excellente fa√ßon de faire un menu, je voulais savoir quelle m√©thode adopter pour faire le m√™me menu mais vertical cette fois ! pour le moment je n’ai pas trouv√© je d√©bute tout juste en CSS ;o)

  17. sebastien

    Merci pour ce tuto, j’aurai pens√© gal√©rer mais c’est bien d√©taill√© quand on est dedans, alors merci beaucoup ;)

Les commentaires sont clos.