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

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

This shows also on safari 2.0 (i think it looks better on a mac myself)

Posted by Davin Taylor on 10/01, 07:09 PM

WOw this works great!! what a sweet site!! I have been looking to improve my web skills. lots of cool stuff here. Thanks

Posted by Chads Cartoons on 10/11, 12:37 AM

This is great and has given a professional look and feel to my property management website even though I have no formal web development training.

Posted by Rent New Tampa on 10/23, 04:48 PM

Finally! That's exactly what I was looking for my site but didn't know how to do it! BTW at my website you can get a freeware utility for replacing the menues in your pages: change the menu once and replace it on each page automaticaly.

Thank you for this menu tip!

Posted by Milan Outlook on 10/25, 08:18 AM

This is a nice little menu and will improve my new site alot. I am just curious as how to fix something though.

In Firefox the menu looks superb but in IE there is a 1px space between each button. I have tried many things with no luck. If anyone knows how to fix that, please post here or something.

Thanks!

Posted by Ex on 10/29, 11:42 PM

Perfect! It's very clean and simple. Blends in with my website seamlessly!

Posted by Daniel on 11/10, 11:50 PM

how do i align the menu to the left or to the rite of where i want it can someone tell me the code to align the menu or how i can get about to doing this task

Posted by Mathees on 11/17, 01:39 PM

He Mathees,

Just remove the <ul> </ul> tags and then the menu can be aligned like you want it to be.

Posted by Roy on 11/20, 05:42 PM

hey roy that deltes the fancy menu when i remove <ul class="glossymenu"> and</ul>at the end

Posted by mathees on 11/21, 09:28 AM

Just remove the <ul></ul> and adjust it like this;

<span class="glossymenu">
<a href=" ">link1</a>
<a href=" ">link2</a>
<a href=" ">link3</a>
</span>

That works for me.

Posted by Roy on 11/21, 03:37 PM

Comment Pages 5 of 13 pages « First < 3 4 5 6 7 > Last »