Team-Masters.com
Que du Gratuit pour Webmasters
Créez un menu vertical avec effet de rollover en CSS
Vous voulez un menu avec un effet de rollover mais sans avoir recours à Javascript et à des iamges ? Pas de problème, la puissance des feuilles de style permettent aujour’hui de réaliser cela en un tour de main. Voyez plutôt.
Cliquez ici pour voir l’effet de rollover sur le menu.
Voici le code CSS à insérer dans le HEAD de votre page à l’aide des balises <style>, ou mieux, à mettre dans une feuille de style externe :
#navcontainer { width: 200px; }
#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #036;
border-bottom: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #369;
color: #fff;
}Et maintenant le code HTML du menu à mettre dans le BODY de votre page :
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
<li><a href="#">Rubrique 5</a></li>
</ul>
</div>Simple, rapide et cool. C’est sur Team-Masters.com.
21 août 2005
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 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
Un menu vertical simple en CSS
