Portes coulissantes menu vertical

Portes coulissantes menu vertical

Cette swaps bien rembourrées menu vertical entre deux images de fond selon que la souris est sur ou en dehors d'un élément de menu. Pour assurer une transition en douceur entre parfaitement le changement d'image (en particulier dans IE), il utilise la technique de portes coulissantes et une image de fond unique qui fusionne les deux milieux en elle.

/*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 */


.slidedoormenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu (don't forget to add border with below!) */
border-left: 8px solid #ffa1a3; /* thick left border of menu */


}


.slidedoormenu li{
border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */
}


.slidedoormenu li a{
background: white url(media/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: black;
width: auto;
border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
}


.slidedoormenu li a:visited, .slidedoormenu li a:active{
color: black;
}


.slidedoormenu li a:hover{
background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
color: black;
}


.slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
}


.slidedoormenu li.lastitem a{
padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
}


</style>


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

Le code html

<ul class="slidedoormenu">
<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