13Styles

Wax CSS Menu

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>

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. We also provide daily inspiration in the form of a css menu gallery.

About | Advertise