Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

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 (137)

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 12 of 14 pages « First < 10 11 12 13 14 >

I have used Dynamic Drive for some time now, its a great resource. I'm having trouble with the "Glossy Vertical Menu" CSS. Works fine on Firefox and Safari (MAC OS) but as others have said is blank white until the mouse hovers when using IE on the PC.
Is there any workaround for this.

Regards, Mike

Posted by Michael Maher on 03/16, 12:33 AM

I should have said that the problem is with IE 6 when I test it on IE 7 its ok. if anyone would like to look at the site you can find it on:

www.basepoint.com.au/NEW/index.html

It really is a pretty set of links and I do want to use it so, any assistance or advice is most welcome.

Many thanks,

Mike

Posted by Michael Maher on 03/16, 12:54 AM

hi, im trying this menu but as i open it, it moves all my htm document. how can i code it so it overlaps any content below the menu. like a hover. any clues anyone? thanks !

Posted by jorge on 03/25, 05:44 PM

Cool, but it needs to come in more colors like the other Glossymenu.

Posted by Leprechaun on 03/26, 09:15 AM

Pretty poor scripting (or verification) due to the functionality in different browsers.

Posted by Morten on 04/08, 07:19 AM

Looks great
Any idea how to have this included in a Ajax based slide menu ?

Posted by gohindi on 04/17, 12:43 PM

i like the glossy menu but would like to see the navigation bar choosen to stay the darker image or color. So when you are on the About page, that nav looks different from the others. I do this with other coding techniques but couldn't figure out how to do it with this one.

any suggestions?
thank you

Posted by Teri on 04/23, 03:17 PM

This site is really helpful for our works

Posted by Design MAX on 04/29, 06:09 PM

I noticed that on long webpages that the left menu floats to the mid length of the webpage. How can I change the code to keep it near the top left hand side of the webpage. Thank you.

Posted by John Engebretson on 04/30, 02:22 PM

great !!

Posted by Victor Osuna on 05/07, 01:27 PM

Comment Pages 12 of 14 pages « First < 10 11 12 13 14 >