Team-Masters.com
Que du Gratuit pour Webmasters
Un menu horizontal bien souligné
Un menu bien comme il faut en CSS avec un soulignement et changement de couleur des caractéristiques au passage de la souris. On peut aussi distinguer la rubrique en cours en appliquant un style particulier.
Voici le code CSS du menu à mettre dans le HEAD de vos pages, ou mieux, dans un fichier CSS externe :
#main-menu {
margin:0;
bottom:0;
right:0;
font-family: Verdana,sans-serif;
white-space:nowrap;
font-size: 80%;
}
#main-menu li {
display:block;
float:left;
list-style-type:none;
margin:2px;
padding:0;
text-transform: uppercase;
}
/*Les liens normaux*/
#main-menu a {
display:block;
float:left;
padding:10px 16px 10px 16px;
background:#fff;
border-bottom: 3px solid #908B72;
color: #908B72;
font-weight: normal;
text-decoration: none;
}
/*Les liens au survol et rubrique en cours*/
#main-menu a:hover, #main-menu #selected a {
color:#D1481B;
background: #EAE8E1;
border-bottom: 3px solid #D1481B;
font-weight: normal;
text-decoration: none;
} Et maintenant le code HTML du menu :
<ul id="main-menu">
<li id="selected"><a href="#">Accueil</a></li>
<li><a href="#" title="A propos">A propos</a></li>
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li><a href="#" title="Voir les Blogs">Blogs</a></li>
<li><a href="#" title="Nous contacter">Contact</a></li>
</ul>Pour afficher le menu en cours, appliquez l’id #selected comme attribut du li.
18 août 2006
22 menus verticaux en CSS prêts à l’emploi
Un menu vertical avec un effet bouton en CSS
Un menu horizontal souligné au passage de la souris en CSS
Une barre de pagination tout en CSS
Un menu horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé en CSS
Un menu vertical aux effets agréables en CSS
CSS : Un menu vertical en 3D
Créez un menu vertical avec effet de rollover en CSS
Un menu vertical simple en CSS
