Vous voulez un menu vertical simple et configurable à vos goûts ? En voici un qui est fait uniquement de code HTML et CSS. Le code de la feuille de style est modifiable, quant au HTML, vous pouvez ajouter autant de rubriques que vous voulez dans votre menu.
Cliquez ici pour voir un exemple du menu.
Voici le code CSS du menu vertical simple avec séparateur. Il est à insérer dans l’en-tête (HEAD) de votre page ou mieux, dans une feuille de style externe :
#navcontainer
{
background-color: #FFFF00;
width: 200px;
}
#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navlist li a {
text-decoration: none;
font-weight: bold;
}Et maintenant le code HTML à insérer dans le BODY de votre page :
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>Très simplement conçu, mettez-le à vos couleurs, police, largeur, bref customisez-le !!!
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
Créez un menu vertical avec effet de rollover en CSS