Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library: Vertical CSS Menus: Here

Glossy Vertical Menu

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

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

First of all great menu. Could you some other colors besides blue for the images? Like gray? or navy blue? If you couls that would be great.

Posted by Scott on 05/11, 09:12 PM

how do i add in my web site in css page or from where i start to insert code & get this effect of buttons?
tell me now! please

Posted by Pradeep on 05/13, 01:53 AM

how do i add in my web site in to css page; from where should i insert it & get this effect of buttons?
tell me now please!

Posted by Pradeep on 05/13, 01:55 AM

Hi,
I am using this technique at http://holliesdancindream.net - using the same background image that is in the header (and applying a wide border), just positioning it differently to avoid multiple image downloads.
-
Thanks!
Jim Summer
http://tentonweb.com/
Jacksonville, FL USA

Posted by Jacksonville Web Design on 05/13, 09:20 AM

Has anybody worked out how to fix the problem of the mouseover showing as white in IE?

a:hover {background-image: url(media/glossyback2.gif)}

Otherwise a great menu...

Posted by Roban on 05/19, 10:51 PM

great job.

Posted by nugraha on 05/27, 11:25 PM

Cool! very much it is pleasant To me. Simply and easily.

Posted by douson on 06/17, 10:00 PM

many thank's

Posted by ver on 06/18, 02:35 AM

Very cool and usefull!

Thanks!

Posted by Aang on 06/25, 10:00 AM

Quite nice really if you use a smoother font, but maybe thats just ME! =D

Best Regards
~Spine :)

Posted by Spinethetic on 07/01, 10:38 AM

Comment Pages 13 of 13 pages « First < 11 12 13