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:
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.
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>
.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>
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.
very nice little script.
thanks
thanks
one more nice and simple example of using CSS.
very good site!
very good site!
Nice!
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.
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.
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.
Like code a lot, I'll use it for sure. Thanks a lot !
- "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.
Commenting is not available in this weblog entry.
Anyway nice sample as usually. Thanks.