Team-Masters.com
Que du Gratuit pour Webmasters
Un menu vertical hiérarchisé en CSS
Ce menu vertical en CSS permet de donner du style à vos pages en hiérarchisant le menu avec des titres de rubriques mères suivies des sous-rubriques, cliquables, correspondantes. Il est tout en feuille de style et paramétrable à volonté.
Cliquez ici pour voir un exemple du menu
Voici le code CSS, à insérer dans le HEAD de la page ou à mettre dans une feuille de style externe :
#blueblockmenu{
border: 1px solid #FFCC66;
border-bottom-width: 0;
width: 185px;
}
#blueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#blueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}
* html #blueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}
#blueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}
#blueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid #FFCC66;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
</style>Et voici le code HTML du menu vertical, à intégrer dans le BODY de la page :
<div id="blueblockmenu">
<div class="menutitle">Ma rubrique 1</div>
<ul>
<li><a href="#">Scripts gratuits</a></li>
<li><a href="#">Comment faire</a></li>
<li><a href="#">Cours</a></li>
<li><a href="#">Forums d'aide</a></li>
</ul>
<div class="menutitle">Ma rubrique 2</div>
<ul>
<li><a href="#">Menus CSS Horizontaux</a></li>
<li><a href="#">Menus CSS Vertivaux</a></li>
<li><a href="#">Effets d'images</a></li>
<li><a href=#">Formulaires</a></li>
<li><a href="#">Boîtes et blocs</a></li>
<li><a href="#" style="border-bottom-color: #FFCC66">Liens et boutons</a></li>
</ul>
</div>Changez les couleurs, mariez-les comme vous voulez, redéfinissez la police, bref faîtes comme il vous plait.
C’est sur Team-Masters.com
27 mai 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 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
