Get your spot

Saturday CSS Menu



This menu is called “Saturday”, well, because I made it on a Saturday.

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 5KB
  • 4 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. As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("/code/saturday/images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#saturday li{display:block;float:left;margin:0;pading:0;}
ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("/code/saturday/images/bgDIVIDER.gif") no-repeat top right;}
ul#saturday li a:hover{background:transparent url("/code/saturday/images/bgHOVER.gif") no-repeat top right;}
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("/code/saturday/images/bgON.gif") no-repeat top right;}
–>
</style>

HTML

<div id="menucase">
	<ul id="saturday">
		<li><a href="" title="">Home</a></li>
		<li><a href="" title="">About Us</a></li>
		<li><a href="" title="" class="current">Services</a></li>
		<li><a href="" title="">Our Work</a></li>
		<li><a href="" title="">Contact Us</a></li>
	</ul>
</div>