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

I would like to use this verticle menu described on this URL http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/

to add to my site.

I am a novice but am ok with modifying scripts when needed. (Use this when replying as a guide ot my knowledge)

My question is
Where do I place the CSS within the page?
Where do I place the HTML within the page?

any assistance would be greatly appreciated!!!
Thank you in advance!!!

Posted by MIchael Hurley on 11/25, 04:04 PM

This works great on Myspace also, very nice.

Posted by Adriel on 11/30, 11:47 PM

@ MIchael Hurley :

you can place the CSS like so:
<head>
<style>
your css
</style>
</head>

And HTML like so:

<body>
your HTML stuff
</body>

Also you can make the CSS an external document and use the <link rel> tag to have your webpage retrieve the CSS document.

Posted by Adriel on 11/30, 11:50 PM

it is very simple and effective...but if any one can help me because it works very well on firefox, but on explorer browser is not the same, there is space between the rows,
please any help!!!

Posted by suzie on 12/04, 07:33 AM

very great menu, but on explorer browser doesn't look the same as here, on firefox it is very good. so please if any one can help me to modify it on explorer, there is spaces between rows.

please any help!!!

Posted by suzie on 12/04, 07:36 AM

muy efectivo y funcional

Posted by moleculax on 12/04, 02:24 PM

muy funcional y efectivo

Posted by moleculax on 12/04, 02:25 PM

I get bullets to the left of the menu, as a condition of them being put in a list. Is there a way to get rid of the bullets and retain the links?

Posted by Don on 12/09, 08:11 AM

<b>Works nicely :)<b> you can also get different y-repeat images to fill these menus for an easy new effect!

Posted by Steven on 12/09, 08:06 PM

very great menu, but on explorer browser doesn't
please help or update

Posted by austrian on 01/19, 02:31 PM

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

Commenting is not available in this weblog entry.