Dynamic Drive CSS Library- Glossy Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

hi i have 2 more questions first one being can u do sub menus for this menu if so how and can you turn this into a horizantal menu if so how...thanks for your help Roy

Posted by Mathees on 11/21, 08:06 PM

Hi Mathees,

Yes you can make sub menus and make it horizontal.
I'm in a good mood, so i made one. It is a combination of this menu and suckertree horizontal menu. it is to big to place it over here. If you give me your email i'll send it to you.

Roy

Posted by Roy on 11/22, 10:47 AM

Thanks Roy, my email address is eastyorks_finest@hotmail.com

Posted by mathees on 11/22, 11:03 AM

hi roy
pls can u send me this link.i need it urgently

Posted by alka on 11/30, 03:23 AM

whats is your email and what menu do you want???

Posted by Roy on 12/14, 09:10 AM

I have been using this menu for some time and like it a lot... the only problem I have been having is the way it displays some of the links in IE. It displays perfectly in Firefox, but for some reason it acts as if the text has two lines in IE sometimes. An example on my site is http://www.rentnewtampa.com/communities/arborgreene.html. The first link on the left (Arbor Greene) is 2x the height of the others... can't seem to figue out why this is happening...

Posted by Tampa Property Management on 12/14, 11:40 AM

Woops... forget that last post... was so busy looking at the style code, I didn't realize my mistake in the html portion... It appears the </a> element was left out of all the links that did not display properly in IE. All of the links still worked properly, it just didn't look as nice... Thanks again, this is a great menu that I like a lot.

Posted by Tampa Property Management on 12/14, 11:50 AM

I get bullet points which look kinda odd, anybody know how to remove them please.

Thanks Stuart

Posted by Stuart on 12/17, 06:17 PM

i need this same menu but with sub menus, if you can mail me the code i will apreciate, jdmadriz@cgmconsultores.com

Thanks.

Posted by Jose on 12/19, 03:20 PM

I have this working great on my site in Netscape 8.1 and in Firefox 1.5, but it's not working when viewed in Internet Explorer or AOL browsers. I've been at it for hours, but no luck. Please, if someone could help me figure this out it would be gretly appreciated.

Posted by James on 12/29, 05:48 AM

Comment Pages 6 of 15 pages « First < 4 5 6 7 8 > Last »

Commenting is not available in this weblog entry.