Get your spot

Slate CSS Menu



This menu is called “Slate” 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
  • 2 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">
<!–
/* ———————- Blueslate nav ———————- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(/code/slate/images/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(/code/slate/images/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ———————- Greenslate nav ———————- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(/code/slate/images/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(/code/slate/images/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ———————- Redslate nav ———————- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(/code/slate/images/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(/code/slate/images/redslate_backgroundOVER.gif) no-repeat top center;}
/* ———————- Purpleslate nav ———————- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(/code/slate/images/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(/code/slate/images/purpleslate_backgroundOVER.gif) no-repeat top center;}
–>
</style>

HTML

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