Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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 2 of 15 pages  <  1 2 3 4 >  Last »

Ok these buttons are really cool and I would love to use them on my site, but I am new to CSS, using GoliveCS, but I just don't understand how to install them. Can anyone help, please.
Posted by Michael on 06/26, 03:29 AM
Add this to the style sheet if you want to use headers in the menu that are not links. Can be used to group menu options.

.glossymenu li{
background: url(images/glossyback2.gif) repeat-x bottom left;
font: bold 12px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
}

* html .glossymenu li{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

Then add header elements to the menu using <li>TEXT</li>
Posted by B. Williams on 06/26, 04:53 PM
Michael - just take the CSS code and insert it into the top of your page (usually between the HEAD tags). Then take the HTML code and insert it wherever you want your menu. Change the <li> elements in the HTML code to reflect your own menu options.
Posted by B. Williams on 06/26, 05:14 PM
very nice little script.
thanks
Posted by ant on 06/27, 12:00 AM
one more nice and simple example of using CSS.
very good site!
Posted by Alex on 06/30, 01:01 PM
Nice!
Posted by Sterli on 07/10, 08:12 PM
First, I just want to say thanks for having this site. On this code the two width,(width: 160px;)and(width: 170px;), do not match so you have to adjust it. So you don't get that empty space then the right border.
Posted by WP on 07/14, 08:26 AM
Hello, I cannot see the menu either on firefox or on ie.

My page is as:


<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />
<title>Untitled Document</title>
<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>

</head>

<body>

<ul class="glossymenu">
<li>Dynamic Drive</li>
<li>CSS Examples</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>CSS Drive</li>
<li>Coding Forums</li>
</ul>

<div style="margin-top: 1em; font-size: 90%">Credit: Dynamic Drive CSS library</div>
</body>
</html>


What is my error. Please let me know. Thanks.
Posted by Sharmin on 07/15, 11:51 AM
Like code a lot, I'll use it for sure. Thanks a lot !
Posted by Ivan on 07/16, 08:34 AM
- "Got a question or need help customizing this CSS code? Post it in the CSS Forums." You got a link at the top of "your comments" -

Anyway nice sample as usually. Thanks.
Posted by Ivan on 07/16, 08:54 AM

Comment Pages 2 of 15 pages  <  1 2 3 4 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.