CSS Menus - Slate

Pre-built in red, blue, green and purple.

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>

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.

11 Responses to “Slate”

darksama Says:
January 8th, 2008 at 5:58 pm
I’m curious as to why you redid you selectors for every single color as opposed to creating a main selector with all the positioning, formating options and having further ones with only the color information. Something like this:

#slatenav
{
position:relative;
display:block;
height:42px;
font-size:11px;
font-weight:bold;
background:transparent repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}

.blue #slatenav
{
background-image:url(/code/slate/images/blueslate_background.gif);
}

That way if you need to change the formating of the original selector, you don’t have to do it multiple times. Also, it becomes easier to add new colors since it’s only one property you have to change to get a different color, or image in.
toddynho Says:
January 9th, 2008 at 12:39 pm
Hi darksama, the thought was that people would only be using ONE of the colors on their site and that they would grab the color they wanted and just use that color.
NEK Says:
January 11th, 2008 at 11:12 pm
I just want to say a big thanks to the admin and the creators.
This menu-bar is a very attractive design and I chose the green colour.

from a cold snowy city in Japan
Tom Says:
January 17th, 2008 at 1:20 pm
Nice menus. Thanks for sharing your knowledge.
Troy Says:
February 14th, 2008 at 4:07 pm
Excellent menus, I love the colors/style of the blue menu, but… you don’t happen to have that same menu in a vertical style, do you? If so could you email me the zip file? I know, its a lot to ask - but I truly appreciate people like you who offer this kind of help to us not-so-knowledgable folk.
toddynho Says:
February 15th, 2008 at 2:20 pm
Hi Troy, thanks for the suggestion… I’ll come up with a vertical version of Slate and post it on the site.
cr3 Says:
February 18th, 2008 at 7:31 pm
Thanks for this code. It’s very useful for the positioning info, although I usually use my own background / hover images. A highly valuable resource!
bill Says:
February 20th, 2008 at 8:59 pm
How does one go about centering this menu?
jack Says:
February 23rd, 2008 at 9:27 am
Yep, very simple and very nice. Thanks!
tuofa Says:
April 16th, 2008 at 1:59 am
very simple and very nice!Some good CSS menu navigation,Thanks!
borutt Says:
May 7th, 2008 at 7:37 am
I would realy like this menu centered. Could someone do it or show me how to do it. ?
Thanks!

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