Saturday CSS Menu
Tweet
Saturday CSS Menu
This menu is called “Saturday”, well, because I made it on a Saturday.
A minty styled menu, with green and brown tones. It’s a classic tab design, uses a couple of gradients to good effect, and can be easily customized through the PSD file package. If you like the default colour, you’re good to go!
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
Other Notes
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.
DEMO
CSS MENU
<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("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgDIVIDER.gif") no-repeat top right;}
ul#saturday li a:hover{background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgHOVER.gif") no-repeat top right;}
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgON.gif") no-repeat top right;}
</style>
HTML MENU
<div id="menucase">
<ul id="saturday">
<li><a href="http://www.phpasks.com/blogs/saturday-css-menu/ " title="">Home</a></li>
<li><a href="http://www.phpasks.com/blogs/saturday-css-menu/ " title="">About Us</a></li>
<li><a href="http://www.phpasks.com/blogs/saturday-css-menu/ " title="">Services</a></li>
<li><a href="http://www.phpasks.com/blogs/saturday-css-menu/ " title="">Our Work</a></li>
<li><a href="http://www.phpasks.com/blogs/saturday-css-menu/ " title="">Contact Us</a></li>
</ul>
</div>
No comments yet.