This site has got some pretty stuff for you. If you want to put that shine into the menu of your page, well, here’s the right thing for you—the glossy menu. This one is from Dynamic Drive and we want to share the love to you for the sake of beautifying this CSS World Wide Web we have right now.

This one is very ideal if you want to produce an elegant and eye-catching page. The world will surely see the greatness of your ingenuity if have something like this as part of your web life.

This CSS vertical menu uses a thin, repeating background image (shown below) that changes when your mouse hovers over a link. The image is glossy looking with an indent at the bottom to create a nice separation between links.

Here’s how it looks like in real time:

Here’s the CSS for you:
<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>

And here’s the very neat 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>

Just love it…There is really so much goodness in CSS that I just can’t live without it. CSS allows you to put beauty and style in your web pages in a very easy and fun way. It gives more control and power that you can have in ways unimaginable.You have got to try CSS these days because it’s the wave of the present and the future. Cascading Style Sheets is something really more than meets the eye! Try it now!

Tags: Put Some Shine Into It!