Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

I love this one and in fact all of these, I have used the "Sliding doors" primarially and find them all to be really great not to mention easy to modify if you use ekternal js files and external style sheets embedded into all pages being called from one location.

sorry for the run on

Posted by edub9 on 03/01, 12:05 PM

Well, it is a fine Menu. I will use it on my new project! But you (and me too) have to change
width: 170px;
with following
width: 160px;
Otherwise IE6 shows 10px place to the right border.

Posted by Mike on 03/06, 01:14 PM

The navigation menu is automatically expanding in Firefox and displaying as some sort of bulleted list. Why is that?

Posted by David Dubroff on 03/06, 04:35 PM

Using Firefox, I have a vertical menu that includes sub-menus. The sub-menus are automatically being expanded in Firefox and bullets seem to appear beside the sub-menu links. However, using IE 7 everything looks fine. The sub-menus appear properly once the mouse is hovering over the top level link.

Any suggestions?

Posted by David Dubroff on 03/06, 04:54 PM

The website is: swazilandembassyus.com

Posted by David Dubroff on 03/06, 04:57 PM

This a cool menu. Anybody mind sending me the menu with sub menu vertical. Thanks in advance mapyaboy@gmail.com

Posted by Daselecta on 03/06, 09:53 PM

Great Menu ! Works fine on IE6 and Firefox but in IE7 I get a "white button" on hover. Still works when clicked but the background gif only shows intermittently.

Any ideas?

Posted by vox on 03/19, 07:44 AM

buenisimo mi pana, fantastic!!!! god-job man!!!

Posted by Janluis on 03/26, 09:20 PM

thanks....
it's very simple to use.

Posted by billy on 03/30, 12:07 AM

I tried this code on a website I was working on, and although I did not complete the website, I thought this menu looked extremely good. I would give it an A+++ rating.

Posted by Mr Webby on 04/26, 08:55 PM

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

Commenting is not available in this weblog entry.