Team-Masters.com
Que du Gratuit pour Webmasters
Un menu vertical bien sympathique en CSS
Voici un modèle de menu que vous avez sûrement déjà vu sur des sites Web lors de vos longues soirées de surf.
Il est très simple, mais le rendu est épatant. Du style, rien que du style. Il est totalement fait de code CSS, très léger à insérer dans le HEAD de vos pages ou dans une feuille de style externe.
Les paramètres tels la police, la largeur du menu, la bordure et la couleur de fond sont modifiables donc adaptables à vos besoins.
Il est en fait basé sur le principe des listes (balises ul et li en HTML) auquel on va appliquer des styles. Le code HTML correspondant est donc des plus simples.
Voyez donc ici un exemple du menu vertical bien sympathique.
Voici le code CSS du menu :
#verticalmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}
#verticalmenu h1 {
display: block;
background-color:#00CC99;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}
#verticalmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#verticalmenu ul li {
margin: 0px;
padding: 0px;
}
#verticalmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #339999;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
#verticalmenu ul li a:hover, #verticalmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}N.B : N’oubliez pas que si vous désirez rentrez le code CSS précédent dans le HEAD de vos pages, il faut l’encadrer des balises <style type="text/css"> et </style>
Et voici le code HTML à mettre dans votre page pour faire apparaître votre menu :
<div id="verticalmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Accueil</a></li>
<li><a href="#" tabindex="2">Nous connaître</a></li>
<li><a href="#" tabindex="3">Astuces XP</a></li>
<li><a href="#" tabindex="4">Partenaires</a></li>
<li><a href="#" tabindex="5">Distractions</a></li>
<li><a href="#" tabindex="6">Liens utiles</a></li>
</ul>
</div>Alors c’est simple mais cool non ?
23 mai 2005
Très Bon Plan A NE PAS MANQUER ! Cliquez!!
Des Secrets pour 7€: Un rapport, un script pour réussir à vendre sur Internet. Cliquez!
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
