Dynamic Drive CSS Library- Sexy Panels Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

Sexy Panels Vertical Menu

Author: Dynamic Drive

Sexy Panels is a vertical list menu with a curvy right edge. Its sexiness goes beyond aesthetics, however, as this menu not only maintains its look through any changes to its width or height, but is also very easy to colorize- through CSS alone. This is thanks to the menu's use a single transparent gif (with a white background) for its interface, so changing the menu's color can be accomplished just by changing a few CSS color values instead of firing up that graphics program. Sexy!

Demo:

Single image used (resized for easier download):

The CSS:

<style type="text/css">

.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]-->

The HTML:

<ul class="sexypanels">
<li><a href="http://www.dynamicdrive.com/">»  Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >»  CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">»  JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">»  DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">»  CSS Drive</a></li>
<li class="lastitem"><a href="http://www.codingforums.com/">»  Coding Forums</a></li>		
</ul>

Code Info

Rate this code:

Date Posted: 10/08/2008

Revision History: None

Usage Terms: Click here

Your Comments (34)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 4 of 4 pages « First < 2 3 4

wery nice thanks all

Posted by sohbet on 03/20, 09:27 PM

excellent resource site

Posted by vivek on 04/17, 03:22 AM

Хорошее меню!

Posted by SEM on 05/01, 08:40 AM

wery nice thanks all :D

Posted by Sohbet on 05/12, 04:56 AM

Comment Pages 4 of 4 pages « First < 2 3 4

Commenting is not available in this weblog entry.