.:. Article .:.
Faire un menu en XHTML+CSS
- Technique
- Le 03-02-2004
En parcourant un peu les sites d'aide à la programmation ou les forums, une question revient très souvent, comment faire un menu ? Grace aux méthodes modernes de programmation, réaliser facilement un menu en HHTML et CSS est devenu un jeu d'enfant.
La première chose à garder à l'esprit est la séparation du fond et de la forme lorsqu'on prgramme en XHTML. La forme doit être gérée par la feuille de style et par exemple la mise en forme à l'aide de tableau est à proscrire. Le code doit se résumé en un cadre (div) et des liens :
<div id="menu"> <a href="#">XHTML</a> <a href="#">CSS</a> <a href="#">Test menu</a> <a href="#">PHP</a> <a href="#">MySQL</a> </div>
On aurait également pu utiliser une liste, un menu n'étant qu'une liste de liens, ce qui est peut-être plus conforme à l'esprit de description des données que le XHTML hérite de l'approche XML. Pour ma part je privilégie la simplicité et me contente donc d'une suite de liens.
Maintenant il nous reste à faire la mise en forme à l'aide d'une feuille de style (CSS). La première chose est de placer le contenant (le div), ensuite il nous reste à styliser les liens pour avoir des effets sympa (ou pas d'effet si on recherche a sobriété).
Le premier exemple que je vous propose est de faire un menu horizontal, en haut de page par exemple :
#menu {
width: 100%;
margin: 0;
padding: 0;
}
#menu A {
float: left;
width: 145px;
display: block;
padding: 0.2em;
color: #00008B;
border: 1px solid #00008B;
font-size: medium;
font-weight: bolder;
text-decoration: none;
text-align: center;
}
#menu A:hover {
text-decoration: none;
background-color: #6e8fff;
color: #FFFFFF;
}
Vous pouvez voir ce que ça donne dans un exemple. Ici très peu de style est appliqué sur le contenant (div). Chaque lien est considéré comme un bloc de largeur fixe, auquel on donne une position float pour pouvoir les aligner. Ensuite le lien lui même est stylisé avec un petit effet dynamique grace à l'événement hover.
Si au contraire vous souhaitez avoir un menu vertical, vous n'avez absolument pas besoin de modifier votre page XHTML, il vous suffit de modifier la feuille de style :
#menu {
margin-right: 0.5em;
float: left;
}
#menu A {
width: 145px;
display: block;
padding: 0.1em;
margin: 0.1em;
color: #00008B;
border: 1px solid #ffffff;
border-bottom: 1px dotted #00008B;
font-size: medium;
font-weight: bolder;
text-decoration: none;
text-align: left;
}
#menu A:hover {
border: 1px solid #00008B;
text-decoration: none;
background-color: #6e8fff;
color: #FFFFFF;
}
Vous pouvez voir ce que ça donne dans un exemple. Le contenant est inséré dans le flot de donnée en le positionnant en float. Les liens ne sont plus positionnés en float mais garde la valeur par défaut (relative) ce qui nous permet d'avoir un bloc compact de tous les liens.
Voila il ne vous reste qu'à vous exercer pour bien maîtriser les styles pour faire votre menu tel que vous pouvez le rêver ;-)
Aller plus loin
Commentaires
» Sibelius le 15-03-2004 à 09:03
Ah ben mon commentaire ne t'a pas plus :-/ Dommage, j'ai été choquant quelque part ???
» Marco le 15-03-2004 à 10:03
Si, il m'a beaucoup plu mais crash de mon hébergeur et je n'ai récupéré que le backup du 8 février... Si tu peut le remettre ce sarait sympa :-)
» Sibelius le 15-03-2004 à 10:03
Oups, désolé.
Donc je disais que j'appréciais beaucoup ce genre d'initiatives.
Je trouve simplement dommage que, comme tu l'as dit, tu n'aies pas été au bout de la rigueur et de la sémantique en utilisant une liste pour composer le menu.... les aveugles t'en auraient été reconnaissants ! :)
Bonne continuation à toi et ton site !
Sibelius http:// www.alsacreations.com
» iubito le 16-03-2004 à 03:03
tiens coucou Sibelius :) comme on se retrouve ! lol
Faudrait que je vois si le mien au niveau sémantique il est compatible XHTML... :p
</iubito> http://iubito.free.fr
Vos données personnelles ne sont pas sauvegardées mis à part votre pseudo et votre message. Vous pouvez aller voir les règles de confidentialité sur cette page.