Team-Masters.com
Que du Gratuit pour Webmasters
Un menu horizontal en CSS avec une barre de séparation
Ce menu horizontal tout en CSS est très simple à configurer. Il s’agit d’un menu dont les différents titres des rubriques sont séparés par une barre verticale (à charger). Au passage de la souris sur un titre de rubrique, vous pouvez changer la couleur de fond.
Le code CSS, à mettre dans l’en-tête de vos pages, ou dans un fichier CSS externe :
#menuho ul{
margin: 0;
padding: 0;
margin-bottom: 1em;
float: left;
font: bold 100% Tahoma;
width: 100%;
border: 1px solid #625e00;
background-color: #f9ff91;
}
* html #menuho ul{ /*règle pour IE seul*/
width: 99%;
}
#menuho ul li{
display: inline;
}
#menuho ul li a{
float: left;
color: black;
padding: 2px 12px;
text-decoration: none;
background: transparent url(media/vertical.gif) center right no-repeat;
}
#menuho ul li a:visited{
color: black;
}
#menuho ul li a:hover{
color: black;
background-color: #ffe84f;
} Le code HTML du menu :
<div id="menuho">
<ul>
<li><a href="#" title="Home">Accueil</a></li>
<li><a href="#" title="Mes exemples de CSS">CSS</a></li>
<li><a href="#" title="les nouvelles">News</a></li>
<li id="current"><a href="#" title="Nos archives">Archives</a></li>
<li><a href="#" title="Pour vous">Outils</a></li>
<li><a href="#" title="Tous les forums CSS">Forums</a></li>
</ul>
</div>Pas compliqué du tout, il ne faut pas oublier, outre le code de télécharger la barre de séparation verticale que voici :
16 août 2006
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
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 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
