Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

CSS Library: Vertical CSS Menus: Here

Glossy Vertical Menu

Author: Dynamic Drive

This is a CSS vertical menu that uses a thin, repeating background image that changes when the mouse moves over a link. The image is glossy looking with an indent at the bottom to create a nice separation between links.

Demo:

The two images used:

The CSS:

<style type="text/css">

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(media/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

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

.glossymenu li a:hover{
background-image: url(media/glossyback2.gif);
}

</style>

The HTML:

<ul class="glossymenu">
<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><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li>		
</ul>

Code Info

Rate this code:

Date Posted: 06/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (151)

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 7 of 15 pages « First < 5 6 7 8 9 > Last »

Roy,
would it be possible to get the Submenu and Horizontal code emailed to me

Thank you very much

Posted by Bob Anderson on 01/03, 04:44 PM

Love this menu, but is there a reason why I might get round bullet points to the left of the menu?

Posted by Gemma on 01/25, 06:24 AM

I have used many menus from this site on my website. Basically my website is a revolving door of menu styles etc. I modeled the entire site around that menu. It is the focal point because I have very little content at present. Feel free to take a look. http://ehughes.4t.com The page will redirect you to the actual page. I have a forum etc and will have content as soon as I learn how to do tables. I am very new to html so this site has given me so much help. The css layout section has been the biggest help. Thank you dynamic drive, I'll put a link on my site one of these days.

Posted by ehughes on 01/26, 03:01 PM

nice but I couldn`t do it to work on a website!
the second glossy image didn`t work! keep working on that!

Posted by Manu on 02/09, 11:56 AM

Very nice! I'm pretty proficient with CSS and this was something I was going to do this coming weekend for one of my personal websites. I love the color gradient you used... thinking I'll change the gradient(s) to give it a play around.

Good job - and thanks for sharing your work!

Posted by Watty on 02/13, 04:02 PM

I NEED HELP. HOW DO I GET THIS MENU TO SHOW UP IF I AM USING IT AS A NAVIGATION BAR WITH FRAMES?

Posted by abcd728 on 02/20, 12:20 PM

I'm trying to save this into an external linked style sheet and it isn't working. I'm pulling my hair out, please help.

Posted by Justin on 02/23, 08:17 PM

Hi there what a great resource
Ive just used it on theworldofspain.com but Ive got bullet points next to links and cant remember how to deactivate them
Can any one help?

Posted by Graham on 02/27, 04:12 PM

Also there has been a number questions on the bullet points appearing did anyone fix their prob

Posted by Graham on 02/27, 04:38 PM

hi Graham,
to remove bullets from your menu in .css file remove the <style> & </style> tags.saw your site was nice except those bullets.i too was facing the same problem and got this solution form this site itself.

Posted by ravi on 03/01, 08:30 AM

Comment Pages 7 of 15 pages « First < 5 6 7 8 9 > Last »

Commenting is not available in this weblog entry.