Team-Masters.com

Que du Gratuit pour Webmasters

Rechercher

144 visiteurs par heure!

CLIQUEZ ICI, C'EST COOL ET GRATUIT !

Gagnez du trafic et de l'argent

PHP Sources

ressources graphiques



Classement de sites - Inscrivez le vôtre!

Top Clicks liendur


Un menu vertical simple en CSS

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

 

Dans la même rubrique

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

>> Voir tous les articles