Team-Masters.com
Que du Gratuit pour Webmasters
Un menu vertical aux effets agréables en CSS
Voici un menu vertical intéressant et fait entièrement en CSS. Il offre un effet visuel agréable avec le passage de la souris au-dessus des liens. Fonctionne bien avec tous les navigateurs modernes et en ce qui concerne Internet Explorer, il faut la version 6 et au-dessus. Le code est décomposé en deux parties : une pour la déclaration des styles, et l’autre pour le code HTML lui-même.
Le code CSS, à mettre en les balises <head> et </head> ou dans une feuille de style externe :
#bouton {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}
#bouton ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#bouton li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#bouton li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #bouton li a {
width: auto;
}
#bouton li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}Partie de code à insérer dans la page HTML :
<div id="bouton">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Logiciels</a></li>
<li><a href="#">Périphériques</a></li>
<li><a href="#">Ordinateurs</a></li>
<li><a href="#">Pièces détachées</a></li>
<li><a href="#">Portables</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>Changez les couleurs du fond, des liens ou des bordures... laissez libre court à vos créations.
28 avril 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 horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé 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
