Fox CSS Menu

Bookmark on del.icio.us

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>

  1. No comments yet.

  1. No trackbacks yet.