Panneaux Sexy Menu Vertical

Panneaux Sexy Menu Vertical

Panneaux sexy est un menu liste verticale avec un
bord de courbes à droite. Son sex-appeal va au-delà
l'esthétique, cependant, que ce menu n'est pas seulement
maintient
son look grâce à toute modification de sa largeur ou la hauteur,
 mais
 elle est aussi très facile à colorer par CSS-seul. C'est grâce à l'utilisation
du menu un seul gif transparente (avec un fond blanc) pour son interface,
 donc changer de couleur du menu peut être accompli simplement
 en changeant quelques valeurs
de couleur CSS au lieu de tirer jusqu'à ce programme graphique. Sexy!

*/noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com 

Le code css*/

<style type="text/css">

/*

noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com

 */

.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu */
}


.sexypanels li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}


.sexypanels li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}


.sexypanels li a:visited, .sexypanels li a:active{
color: white;
}


.sexypanels li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}




</style>


<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->

Le code html

<ul class="sexypanels">

<li><a href="votre lien ici">»  Dynamic Drive</a></li>

<li><a href="votre lien ici" >»  CSS Examples</a></li>

<li><a href="votre lien ici">»  JavaScript Reference</a></li>

<li><a href="votre lien ici">»  DOM Reference</a></li>

<li><a href="votre lien ici">»  CSS Drive</a></li>

<li class="lastitem"><a href="votre lien ici">»  Coding Forums</a></li>

</ul>

Posted in: blogger html css menu verticale