Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The HTML:

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 1 of 4 pages  1 2 3 >  Last »

Personally, I'd use a PNG instead of a GIF. Looks cleaner and you get more transparency, so you don't have that ugly jagged edges. The code runs into issues should you have a background that is not one solid color. Perhaps instead of making it a white background on your images, you could use the background image of whatever the menu is going over? May be difficult if it is a picture though...

However, what is nice is that you don't even need rounded corners. You could create any transparent image (PNG or GIF) to be applied to your menu links.

Very Sexy!
Posted by MattZ on 10/09, 06:29 AM
where can I download the image for menus ?
Posted by deepjavero on 10/09, 05:23 PM
http://www.dynamicdrive.com/cssexamples/media/sexypanelright.gif <-- this is the url for the image menu
Posted by mark twain on 10/11, 01:02 AM
Thnx Dynamic Drive
Posted by Afroz on 11/13, 02:12 AM
بدي اعمل موقع ولكن لا اعرف شيء مادا افعل
Posted by ASRA on 11/14, 03:24 AM
لا اعرف كيف اعمل موقع ماذا افعل
Posted by أسراء on 11/14, 03:26 AM
That character () at the start of each link title displays on this page, but when i try to use it it wont display - any ideas?
Posted by Mark on 11/17, 07:17 PM
Mark, In the code change the symbol to this - » - that should work. (Here's hoping you revisit this page!)
Posted by Jo on 11/18, 10:44 AM
It changed the code after I submitted it so here it is with spaces in:

& r a q u o ;

:)
Posted by Jo again on 11/18, 10:45 AM
very nice :)
Posted by web designer on 11/23, 10:02 AM

Comment Pages 1 of 4 pages  1 2 3 >  Last »

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.