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 15 of 15 pages « First < 13 14 15

good site and good menu

Posted by jang on 01/20, 03:01 AM

I already try to change my blog view but by free down load from this site but it's not succes, can some body help me....please

Posted by indra on 01/28, 09:07 AM

When you rollover this menu, the favicon flickers. What is causing that?

Posted by bzsim on 02/09, 10:15 AM

good very good it is useful
thanks.

Posted by belkadi on 02/10, 08:55 AM

To work correctly with IE7 I made this alteration:

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

Not sure how it affects other IE versions.

Posted by Neil on 02/13, 05:25 AM

I used this menu in my website but for some reason there seems to be extra padding on the right hand side yet I have removed all the padding to see if that made a difference. This only seems to be a problem in IE and it is driving me nuts!

Posted by Donna on 02/24, 10:26 AM

I am new to css (learning still) I can make this work, I use DW4 - I have made the link to the external css and placed the html on the page - all I see is a row of dots - anyone point me in the right direction?

Posted by Carl on 04/03, 01:35 PM

How do i get rid of the bullets before the menu?
Plz. help...

Emadz

Posted by Emad Zyed on 04/24, 06:23 AM

Changing 'repeat-x bottom left' to 'repeat top left' allows it to behave properly if your menu item spans two lines, which can happen with liquid layouts, and oddball resizes.

Posted by Sherwood Botsford on 04/24, 01:21 PM

This is a great code for menus. cheers for great clues

Posted by escort services central london on 05/13, 07:37 AM

Comment Pages 15 of 15 pages « First < 13 14 15

Commenting is not available in this weblog entry.