Get a favicon spot!

CSS Menus - Saturday

Pre-built in light green/auburn.

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>

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.

« Dolphin
Vert-one »

5 Responses to “Saturday”

  1. anjana Says:
    March 20th, 2008 at 12:05 pm

    ur website is awsome!!
    don’t u have vertical menus???????

  2. Justin Says:
    April 14th, 2008 at 2:41 am

    Great Script?

    How do you align the menus centered on the page?

  3. Marius Moen Says:
    April 29th, 2008 at 12:23 pm

    Justin, you can do that with the following code:

    #menucase {width: 1000px;
    margin: 0px auto;

    }

  4. 83e92fd37101 Says:
    May 9th, 2008 at 8:46 am

    83e92fd37101…

    83e92fd37101744d7e5b…

  5. alban3610 Says:
    May 13th, 2008 at 6:58 pm

    Hello,
    Excuse I for my English because I speak French.

    I am very satisfied with the menu Saturday Pre-built in light green/auburn only I would like to know if it was possible to see to it that during the passage of the mouse on a tab, that if it unwinds
    Thank you

Leave a Reply

  • 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