Menu z wykorzystaniem Gradientu zdefiniowanego w stylach
Tak jak mówi tytuł postu gradient jako tło zakładek - czasami nie potrzebujemy obrazków które po najechaniu zmieniają się na drugi obrazek (.header) można to zrobić bez obrazków definiując tylko kolor - a gradient daje wiele możliwości aby uzyskać pożądany cień :
<style type="text/css">
.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]-->
użycie w body:
<ul class="slidedoormenu"> <li><a href="/link zakładki">» Nazwa zakładki</a></li> <li><a href="/link zakładki" >» Nazwa zakładki</a></li> <li><a href="/link zakładki">» Nazwa zakładki</a></li> <li><a href="/link zakładki">» Nazwa zakładki</a></li> <li><a href="/link zakładki">» Nazwa zakładki</a></li> <li class="lastitem"><a href="/link zakładki">» Nazwa zakładki</a></li> </ul>