CSS Menus - Wax

Pre-built in blue, orange, red, green and grey.

This menu is called “Wax” and I’m not sure why.

The Menu

Customization

You can get the original Photoshop file as part of the 13Styles.com Photoshop Pack.

FAQ

Entire menu system is less than 3KB.
3 image files, 1 css file, 1 html file.
Has been tested and works in over 150 broswer/operating system combos.
It’s FREE for you to use.

Source Code

Check out the source code below or download the zip file containing all necessary html, css, and images. The “Home” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
/* ———————- Bluewax nav ———————- */
.blue #waxcontainer{position:relative;height:48px;background:#69BEEE;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.blue #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(/code/wax/images/wax/bluewax_bottom.gif) repeat-x bottom left;}
.blue #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.blue #waxnav ul li{display:block;float:left;margin:0 1px;}
.blue #waxnav ul li a{display:block;float:left;color:#003858;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.blue #waxnav ul li a span{padding:0 12px 0 0;}
.blue #waxnav ul li a:hover,.blue #waxnav ul li a.current{color:#fff;background:#1D6893 url(/code/wax/images/wax/bluewax_navtopleft.gif) no-repeat top left;}
.blue #waxnav ul li a:hover span,.blue #waxnav ul li a.current span{display:block;width:auto;background:#1D6893 url(/code/wax/images/wax/bluewax_navtopright.gif) no-repeat top right;}
/* ———————- Orangewax nav ———————- */
.orange #waxcontainer{position:relative;height:48px;background:#FFE297;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.orange #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(/code/wax/images/wax/orangewax_bottom.gif) repeat-x bottom left;}
.orange #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.orange #waxnav ul li{display:block;float:left;margin:0 1px;}
.orange #waxnav ul li a{display:block;float:left;color:#FF7E00;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.orange #waxnav ul li a span{padding:0 12px 0 0;}
.orange #waxnav ul li a:hover,.orange #waxnav ul li a.current{color:#fff;background:#FF9900 url(/code/wax/images/wax/orangewax_navtopleft.gif) no-repeat top left;}
.orange #waxnav ul li a:hover span,.orange #waxnav ul li a.current span{display:block;width:auto;background:#FF9900 url(/code/wax/images/wax/orangewax_navtopright.gif) no-repeat top right;}
/* ———————- Redwax nav ———————- */
.red #waxcontainer{position:relative;height:48px;background:#FFCECE;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.red #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(/code/wax/images/wax/redwax_bottom.gif) repeat-x bottom left;}
.red #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.red #waxnav ul li{display:block;float:left;margin:0 1px;}
.red #waxnav ul li a{display:block;float:left;color:#FF0000;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.red #waxnav ul li a span{padding:0 12px 0 0;}
.red #waxnav ul li a:hover,.red #waxnav ul li a.current{color:#fff;background:#FF0000 url(/code/wax/images/wax/redwax_navtopleft.gif) no-repeat top left;}
.red #waxnav ul li a:hover span,.red #waxnav ul li a.current span{display:block;width:auto;background:#FF0000 url(/code/wax/images/wax/redwax_navtopright.gif) no-repeat top right;}
/* ———————- Greenwax nav ———————- */
.green #waxcontainer{position:relative;height:48px;background:#B0E496;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.green #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(/code/wax/images/wax/greenwax_bottom.gif) repeat-x bottom left;}
.green #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.green #waxnav ul li{display:block;float:left;margin:0 1px;}
.green #waxnav ul li a{display:block;float:left;color:#3BA507;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.green #waxnav ul li a span{padding:0 12px 0 0;}
.green #waxnav ul li a:hover,.green #waxnav ul li a.current{color:#fff;background:#6DBE45 url(/code/wax/images/wax/greenwax_navtopleft.gif) no-repeat top left;}
.green #waxnav ul li a:hover span,.green #waxnav ul li a.current span{display:block;width:auto;background:#6DBE45 url(/code/wax/images/wax/greenwax_navtopright.gif) no-repeat top right;}
/* ———————- Greywax nav ———————- */
.grey #waxcontainer{position:relative;height:48px;background:#E3E3E3;width:100%;font-family:"Trebuchet MS",Arial,Verdana,Helvitica,sans-serif;}
.grey #waxnav{position:relative;height:25px;font-size:11px;font-weight:bold;background:#fff url(/code/wax/images/wax/greywax_bottom.gif) repeat-x bottom left;}
.grey #waxnav ul{margin:0px;padding:0 0 4px 0;list-style-type:none;width:auto;float:right;}
.grey #waxnav ul li{display:block;float:left;margin:0 1px;}
.grey #waxnav ul li a{display:block;float:left;color:#414141;text-decoration:none;padding:0 0 0 12px;height:21px;line-height:195%;}
.grey #waxnav ul li a span{padding:0 12px 0 0;}
.grey #waxnav ul li a:hover,.grey #waxnav ul li a.current{color:#fff;background:#575757 url(/code/wax/images/wax/greywax_navtopleft.gif) no-repeat top left;}
.grey #waxnav ul li a:hover span,.grey #waxnav ul li a.current span{display:block;width:auto;background:#575757 url(/code/wax/images/wax/greywax_navtopright.gif) no-repeat top right;}
–>
</style>

HTML

	<div class="blue">
	<div id="waxcontainer">
	<div id="waxnav">
	<ul>
	<li><a href="" title="" class="current"><span>Home</span></a></li>
	<li><a href="" title=""><span>About Us</span></a></li>
	<li><a href="" title=""><span>Services</span></a></li>
	<li><a href="" title=""><span>Our Work</span></a></li>
	<li><a href="" title=""><span>Contact Us</span></a></li>
	</ul>
	</div>
	</div>
	</div>
	<p>&nbsp;</p>
	<div class="orange">
	<div id="waxcontainer">
	<div id="waxnav">
	<ul>
	<li><a href="" title="" class="current"><span>Home</span></a></li>
	<li><a href="" title=""><span>About Us</span></a></li>
	<li><a href="" title=""><span>Services</span></a></li>
	<li><a href="" title=""><span>Our Work</span></a></li>
	<li><a href="" title=""><span>Contact Us</span></a></li>
	</ul>
	</div>
	</div>
	</div>
	<p>&nbsp;</p>
	<div class="red">
	<div id="waxcontainer">
	<div id="waxnav">
	<ul>
	<li><a href="" title="" class="current"><span>Home</span></a></li>
	<li><a href="" title=""><span>About Us</span></a></li>
	<li><a href="" title=""><span>Services</span></a></li>
	<li><a href="" title=""><span>Our Work</span></a></li>
	<li><a href="" title=""><span>Contact Us</span></a></li>
	</ul>
	</div>
	</div>
	</div>
	<p>&nbsp;</p>
	<div class="green">
	<div id="waxcontainer">
	<div id="waxnav">
	<ul>
	<li><a href="" title="" class="current"><span>Home</span></a></li>
	<li><a href="" title=""><span>About Us</span></a></li>
	<li><a href="" title=""><span>Services</span></a></li>
	<li><a href="" title=""><span>Our Work</span></a></li>
	<li><a href="" title=""><span>Contact Us</span></a></li>
	</ul>
	</div>
	</div>
	</div>
	<p>&nbsp;</p>
	<div class="grey">
	<div id="waxcontainer">
	<div id="waxnav">
	<ul>
	<li><a href="" title="" class="current"><span>Home</span></a></li>
	<li><a href="" title=""><span>About Us</span></a></li>
	<li><a href="" title=""><span>Services</span></a></li>
	<li><a href="" title=""><span>Our Work</span></a></li>
	<li><a href="" title=""><span>Contact Us</span></a></li>
	</ul>
	</div>
	</div>
	</div>

This entry is filed under CSS Menus. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “Wax”

George Butcher Says:
February 6th, 2008 at 6:13 pm
Hello, I downloaded the files to create the “Wax” menu, which is shown in blue, orange, red, green and grey on your website. On your site the menu shows rounded top corners similar to file tabs but
when I download the code and place it in my webpage, the corners are square.

Is it something I am doing wrong?

Regards,
George Butcher
admin Says:
February 6th, 2008 at 8:55 pm
check and make sure that the images referenced in the css file are pointing to the right place.
Joyce Says:
March 21st, 2008 at 4:09 am
Hi..im facing the same problem. the left corner is there, but not at the right
Internet Rozprza Says:
April 9th, 2008 at 6:17 pm
Excellent (and beautiful) menu.
harshad Says:
April 22nd, 2008 at 2:35 pm
Hi I Like the orange and tabs also good.
John Says:
April 28th, 2008 at 7:32 pm
Hi, Love the menu works fine in most browsers but…i’m having a problem with it on
internet explorer on windows xp and vista?? I may have messed it up when putting it in my site
Can anyone spot where i’ve gone wrong? It will be something simple i’m sure but my eyes are missing it!

Thanks,
John

Ps i’m also having a problem with the image gallery on some pages but that’s another issue!

13Styles.com CSS Menus

13styles is all about css menus. The menus are list based, very light-weight, easy to implement, and cross-browser compliant. Some of the css menus are free and some require you to purchase rights to use them.

About | Advertise