Voici un super menu professionnel entièrement gérer grâce à XHTML et CSS, léger et valide XHTML il s'avère être un excellent choix de menu. Il existe plusieurs modèles sur le site source www.cssplay.co.uk
<div id="menu"> <ul> <li><a href="#"><b>Accueil</b></a></li> <li><a href="#"><b>Produits</b></a></li> <li><a href="#"><b>Services</b></a></li> <li><a href="#"><b>Support</b></a></li> <li><a href="#"><b>Contact</b></a></li> <li><a href="#"><b>Liens</b></a></li> </ul> </div>
Dernière étape : l'intégration du CSS à votre feuille de style existante ou dans l'en-tête de votre page contenant le menu si vous le souhaitez, bien qu'il soit recommandé de toujours externalisé vos styles CSS.
#menu ul { margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; list-style:none; height:35px; position:relative; background:#fff; font-size:11px; } #menu li { display:table-cell; margin:0; padding:0; } #menu li a { display:block; float:left; height:35px; line-height:30px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(pro_six_0a.gif) no-repeat; } #menu li a b { float:left; display:block; padding:0 25px 5px 15px; background:url(pro_six_0b.gif) no-repeat right top; } #menu li.current a { color:#fff; background:url(pro_six_2a.gif) no-repeat; } #menu li.current a b { background:url(pro_six_2b.gif) no-repeat right top; } #menu li a:hover { color:#fff; background: url(pro_six_1a.gif) no-repeat; } #menu li a:hover b { background:url(pro_six_1b.gif) no-repeat right top; } #menu li.current a:hover { color:#fff; background: url(pro_six_2a.gif) no-repeat; cursor:default; } #menu li.current a:hover b { background:url(pro_six_2b.gif) no-repeat right top; }
Et voilà ! C'est déjà fini !