{ Installer un menu 100% css / html }
Introduction
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
Choix du style
Menu 1
Menu 2
Menu 3
Le html
<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>
Le css
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 !