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

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 11 of 14 pages « First < 9 10 11 12 13 > Last »

Could someone please tell me, slowly:) how to make this menu horizontal?
I would like to keep the vertical and add the horizontal menu.

Thanks.

Posted by Thomas on 11/01, 08:44 PM

Hi

I like this menu quite a lot and was wondering if there is a horizontal version of it

thnx in advance

Posted by wangers on 11/06, 07:05 PM

Like many others, I'm also getting bullet points on mine and thus far, none of the tips I've seen have removed them. Too bad, it looks great otherwise, but the bullets make it un-usable. Has anyone has figured out how to get rid of the bullets.

Posted by Tom on 11/28, 08:54 AM

this stuff is really cool guys ,thanks alot

Posted by get2tony on 12/24, 06:14 AM

fanatastic

Posted by ritwik on 01/23, 12:08 AM

I find your menus work well - except this one. It will not work in the latest Internet Explorer!

Posted by Tristan on 01/23, 12:35 AM

can someone post a tutorial about slicing psd template and positioning it via css.

Posted by affordable web hosting on 02/10, 11:20 AM

This is a really cute menu and it clashes with my site. I love it because it is the color blue.

Posted by Sheila Berna on 02/11, 11:48 AM

I am using this cascading menu and it works great. I am having one problem when the user uses the drop down then clicks on the links in the submenu tomcat creates a log entry of:

ClientAbortException: java.net.SocketException: Connection reset by peer: socket write error....

I am assuming because the events are still tied to the window and the mouseout event hasn't occured yet.
Any ideas on how to fix this.
using IE7 and tomcat web server

Posted by Linda Martinez on 02/12, 12:13 PM

Hi, is it possible to have the mouseover image stay visible when the page is active and being viewed.?

Posted by Neil on 02/27, 03:29 PM

Comment Pages 11 of 14 pages « First < 9 10 11 12 13 > Last »