Fox CSS Menu
Tweet
Fox CSS Menu
This menu is called “Fox” it’s crafty, bold and colorful.
A great menu for use on dark sites, as it grabs the reader’s attention and gives them a clear path through the site. If you’d prefer a different colour, the PSD package will allow you to easily customize the design.
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.
Other Notes
The “Services” tab has the ON state by adding the “current” class to the A tag.
DEMO
MENU CSS
<style type=“text/css”>
<!–
#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}
#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}
#foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}
#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:5px 20px 0 20px;height:19px;background:transparent url(/code/fox/images/foxmenu_bg-OFF.gif) no-repeat top left;}
#foxmenu ul li a:hover{color:#fff;background:transparent url(/code/fox/images/foxmenu_bg-OVER.gif) no-repeat top right;}
#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;}
–>
</style>
MENU HTML
<div id=”foxmenucontainer”>
<div id=”foxmenu”>
<ul>
<li><a href=”http://www.phpasks.com” title=”css menus”><span>Home</span></a></li>
<li><a href=”http://www.phpasks.com” title=”css menus”><span>About Us</span></a></li>
<li><a href=”http://www.phpasks.com” title=”css menus”><span>Services</span></a></li><li><a href=”http://www.phpasks.com” title=”css menus”><span>Our Work</span></a></li>
<li><a href=”http://www.phpasks.com” title=”css menus”><span>Contact Us</span></a></li>
</ul>
</div>
</div>
No comments yet.