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

A nice simple menu. Can be made using even smaller images (1px wide) to take up less space. It's good that it keeps in mind browser limitations.

*I recommend this menu.

Posted by Nathan on 06/02, 01:53 PM

fantastic

Posted by gerry on 06/04, 06:36 AM

How do i put childs on every <li>..????

Posted by Bryan on 06/06, 01:31 AM

downright awesome! I love dynamic drive!

Posted by mr webby on 06/07, 08:55 PM

But it's still some visual glitch with cursor "onmouseover" (only IE), that's caused by this code:
a:hover {background-image: url(media/glossyback2.gif)}

Posted by Robinzon on 06/09, 02:47 AM

WOW! This is a great code for menus. Couldn't say it better. nice work.

Posted by Sean on 06/12, 10:30 PM

this does not work in
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

The menu apears blank until you hoover over the menu

Posted by Shay on 06/13, 10:31 AM

how do i add in my web site & get this effect of buttons

Posted by hitesh patel on 06/15, 11:59 AM

Cool ! Simply and efffective

Posted by Thái Cao Phong on 06/19, 11:12 PM

Can't seem to get the block to left justify in the cell in which I placed it. Any thoughts?

Posted by Dnaiel on 06/21, 03:06 AM

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

Commenting is not available in this weblog entry.