Team-Masters.com
Que du Gratuit pour Webmasters
CSS : Un menu vertical en 3D
Vous êtes à la recherche d’un menu vertical pour vos pages de site. En voici un conçu avec du style tout en CSS et HTML mais qui vous donnera un effet en 3D. Le code CSS vous permettra de définir votre propre style tant au niveau de la police, des couleurs, de la taille... bref, à vous d’essayer. Est compatible avec la plupart des navigateurs. La rubrique courante est distinguée des autres par une couleur différente sur le côté gauche.
Cliquez ici pour voir un exemple de menu 3D en CSS.
Code CSS à insérer dans le HEAD de votre page ou dans une feuille de style externe :
#navlist
{
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 0.8em Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
font-size: 1em;
}
#navlist a
{
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
#navlist a#courant { border-color: #5bd #035 #068 #f30; }
#navlist a
{
width: 99%;
/* necessaire seulement pour Internet Explorer */
}
#navlist a
{
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
/* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
#navcontainer>#navlist a
{
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}
#navlist a:hover, #navlist a#courant:hover
{
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#navlist a:active, #navlist a#courant:active
{
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}Code HTML à insrérer dans le BODY de votre page à l’endroit où vous votre menu en 3D en CSS :
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="courant">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
<li><a href="#">Rubrique 5</a></li>
</ul>
</div>La puissance des feuilles de style vous permet en plus de donner du style à vos pages sans avoir forcément recours à du Javascript. C’est un plus pour leréférencement de vos pages car on le sait, le titre des rubriques du menu est important pour les robots des moteurs, alors avec un simple code HTML qui construit votre menu, c’est un plus pour votre référencement.
28 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
Créez un menu vertical avec effet de rollover en CSS
Un menu vertical simple en CSS
