CSS Menus - Fox

Pre-built in red. Background color controlled in css.

This menu is called “Fox” 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 “Services” tab has the ON state by adding the “current” class to the A tag.

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>

HTML

<div id="foxmenucontainer">
	<div id="foxmenu">
		<ul>
			<li><a href="http://www.13styles.com" title="css menus"><span>Home</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><span>About Us</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus" class="current"><span>Services</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><span>Our Work</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><span>Contact Us</span></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.

2 Responses to “Fox”

Matze Says:
February 15th, 2008 at 12:43 pm
Good work!
Thanks for this menu.
Looks great, easy to modify, what do you want more?!
Nicolas Says:
February 26th, 2008 at 3:23 pm
Hi,

With Mozilla Firefox this is very good but with Internet Explorer, the menu is bad !
I put exactly the same code but i don’t know why I have this problem ??

Somebody can help me ?

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