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

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 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

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

Is there a way to add a code to keep one button highlighted when on that specific page? Thank you!

Posted by Test on 08/08, 09:46 AM

Nice menu! Excellent code.

I just cant view the image, my server seems to be blocking the bitmap files. Can somebody put the bitmaps inside a zip file?

Posted by Marcio on 08/18, 12:13 PM

I really like Glossymenu and want to use on a new website. As I develop the new site, I realize that if I need to alter the naviagion menu (glossymenu html code) I'll have to do it on every page which would be a nightmare. How can I link to a file (ex. navigation.html) that has all the naviagtional links and code which can then be placed into a page template. Then wehn I need to alter the navigational menu it changes throughout the site.

Posted by Leo on 08/29, 06:15 AM

i copied and paste both the above code...and also images..but it's not working.idon't know why???

Posted by indiarocks on 11/12, 01:00 AM

I woul like to incorporate this Verticle menu into my site. I am not sure where to place the CSS code or HTML code.

I would thik the CSS would go in the HEader of the page I want and the HTML in the Body section of the area of the page I want the menu to appear.

Where do I put the css Too?
Where do I copy the HTML too?

Any help would be greatly appreciated!
I would consider myself a novice but can modify code fairly well so use that as a guide when replying.

Thank you in advance for your assistance!!!

Posted by Mike on 11/25, 04:02 PM

Comment Pages 13 of 15 pages « First < 11 12 13 14 15 >

Commenting is not available in this weblog entry.