Team-Masters.com
Que du Gratuit pour Webmasters
Un menu horizontal avec du relief en CSS
Voici un autre menu horizontal pour agrémenter vos pages web. Fait uniquement en feuille de style, ce menu est adaptable à votre design à volonté, puisqu’il n’utilise aucune image : il suffit de définir dans le code CSS vos couleurs et le tour est joué. De plus, si vous placez le code CSS dans une feuille de style externe, une seule modification et le menu de toutes vos pages est changé en un rien de temps.
Il s’agit d’un menu dont les liens ressortent lorsqu’ils sont survolés par la souris, comme un bouton alors que ce n’en est pas un ! Ce menu utilise donc les pseudo-classes CSS propres aux liens.
Compatibilité :
Internet Explorer 5 et+
Firefox 1.0 et +. NS6 et +.
Opera 7 et +
Bon assez parlé, voyez un exemple ici.
Code CSS à mettre dans le HEAD de vos pages entre les balises <style type="text/css"> et </style> ou à insérer dans votre feuille de style externe à laquelle votre page est attachée :
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}
.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}
html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
}
</style> Code HTML du menu à mettre dans le BODY de vos pages :
<div class="hovermenu">
<ul>
<li><a href="#">Cool menu</a></li>
<li><a href="#">En avant</a></li>
<li><a href="#">Toujours plus</a></li>
<li><a href="#">Et très simple</a></li>
<li><a href="#">Sur Team-Masters</a></li>
</ul>
</div>Modifiez à volonté les paramètres couleur, police et bordure des styles dans le code CSS pour adapter le menu à votre design.
Encore une fois sur Team-Masters.com, c’est simple mais cool.
8 juillet 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
Créez un menu vertical avec effet de rollover en CSS
