Team-Masters.com
Que du Gratuit pour Webmasters
Un menu vertical avec un effet bouton en CSS
Voici un menu vertical tout en CSS qui a du look et qui est facilament paramétrable en terme de police, couleur, etc...
Ce menu donne l’impression qu’on utilise des boutons images alors qu’il fait seulement appel à des propriétés CSS concernant les bordures. Il s’agit de donner aux bordures des liens en effet "ridge" en jouant sur les contrastes de couleurs des côtés haut/gauche et droit/bas.
Mais voyez plutôt dans cet exemple de menu.
Voici le code CSS à insérer dans le HEAD de vos pages ou à mettre dans un fichier CSS externe :
/*Ici, vous pouvez jouer sur la largeur du menu*/
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}
/*définition des liens*/
.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
/*Couleur des bords clair foncé foncé clair*/
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0;
background-color: #704968;
text-decoration:none;
}
.buttonmenu li a:visited{
color: white;
}
/*Ici, c'est pour le survol des liens*/
.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
} Maintenant, le code HTML du menu à mattre dans le BODY de vos pages :
<ul class="buttonmenu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Librairie CSS</a></li>
<li><a href="#">Cours CSS</a></li>
<li><a href="#">Optimiseur de code</a></li>
<li><a href="#">Générateur CSS</a></li>
<li><a href="#">Boutons à gogo</a></li>
</ul>C’est tout, comme d’habitude, jouez sur les propiétés et améliorez ce menu selon votre style.
18 août 2006
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
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
