Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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

There are gaps between each link in when viewed in IE 7.

Posted by ta.w on 07/19, 05:29 PM

Once IE7 formally releases, I'll be going through all the CSS codes to address any issue in that browser. :)

Posted by ddadmin on 07/19, 10:35 PM

Hey nice!!!

but if i wanna submenus??

Posted by Asinox on 07/28, 04:56 PM

This is a GREAT! menu.

Posted by H3X3D on 07/31, 07:17 PM

Definitely a good menu, but an even better method of applying this would be to 1) combine the two images into one, and change the horizontal positioning on a:hover to avoid that quick bit of white space when you first hover over a link, and 2) make the images 1px wide... just to cater to the dial-up crowd even more :P.

Otherwise a fantastic menu.

Posted by Korra on 08/02, 08:48 PM

erm,i gt a question,how to change this vertical menu to a horizontal???

Posted by ben on 08/03, 01:46 AM

Making it horizontal is fairly simple--after adjusting height and width to your desire (or before, it really doesn't matter), set the li's in question (such as #nav li ) to either float: left; or display. Either or both of these methods should work (I've personally tested float: left, so I know what I'm talking about on that}. If you need further help... just respond.

Posted by Korra on 08/04, 05:35 AM

erm,then for the above code,where should i put the float: left?

Posted by ben on 08/04, 10:46 AM

How do i add in my html and tell me in detail how to put where its scripts located.

Thank you in advance.

Posted by San on 08/14/06, 4:21pm

Posted by ngysan on 08/14, 04:22 AM

Hi I need a bit of assitance on how to make this code work I understand html code to some degree but don't know anthing about css. Do I have to save the first part of this code as a .css file in the same folder or something?
thank you

Posted by Jeremy on 08/16, 10:49 AM

Comment Pages 3 of 15 pages < 1 2 3 4 5 > Last »

Commenting is not available in this weblog entry.