Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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 4 of 14 pages « First < 2 3 4 5 6 > Last »

The only part that doesn't work is the css when it says (media/glossyback.gif) and ones like that. I need a full link, like http://www.dynamicdrive.com/style/csslibrary/item/media/glossyback.gif

Freewebs won't allow it. Sorry, can you please email me the full links?

Posted by Suki on 08/20, 11:35 AM

Make a new folder "media" where your index.html is located then copy glossyback.gif there.

Posted by Luky on 08/20, 02:58 PM

As a newbie developing my own site, I was looking for something like this, thanks... check out my site, hopefully it will be there in a few days...

Posted by Rob on 08/23, 03:28 PM

Can children be put on this menu??
like to have submenus...

Posted by Regac on 08/29, 03:11 PM

Awesome - your stuff just gets better & better!

Posted by Taekwondo on 09/02, 08:09 AM

The great thing is that you only need to change font family and the bg images (30 secs in photosho
)to get a completely different effect : will put to use on some of my sites

Posted by Paul on 09/06, 11:33 AM

Actually your whole website is very nice, and usefull for every one,Really each and everything is fantastic

Posted by Gajanan Sawalke on 09/26, 12:41 AM

How do i get rid of the bullet points next to the menu?

Posted by joe on 09/26, 03:13 PM

Doesn't work!

I just get a blank white area but a pointing hand appears if I hover over the area where the menu should be :>(

Posted by Webworth on 09/26, 04:35 PM

Shay, I am using the Firefox as well (although 1.5.0.7) and mine shows perfect. The only time I see a problem is in IE 7.0.5346.5 Beta 2 where it adds white space below each button.

But this is a very good script and I agree Nathan, you should edit the images down to 1px to make the load that much easier.

Posted by Duran on 09/29, 04:48 PM

Comment Pages 4 of 14 pages « First < 2 3 4 5 6 > Last »