Get a favicon spot!

CSS Menus - Style #1

Pre-built in grey/blue. First menu released.

This menu is called “Style1″ and I’m not sure why.

The Menu

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">
<!–
#styleone{position:relative;display:block;height:21px;font-size:11px;font-weight:bold;background:transparent url(/code/style1/images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-bottom:1px solid #d9d9d9;}
#styleone ul{margin:0;padding:0;list-style-type:none;width:auto;}
#styleone ul li{display:block;float:left;margin:0 1px 0 0;}
#styleone ul li a{display:block;float:left;color:#034895;text-decoration:none;padding:3px 20px 0 20px;height:18px;}
#styleone ul li a:hover,#styleone ul li a.current{color:#034895;background:transparent url(/code/style1/images/bgON.gif) repeat-x top left;}
–>
</style>

HTML

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

« Style #2
Wax »

7 Responses to “Style #1”

  1. Pritee Sharma Says:
    February 4th, 2008 at 6:42 am

    it a simple way to code a menu.
    but when i did this its not working in IE6.

  2. toddynho Says:
    February 6th, 2008 at 2:53 pm

    What’s not working in IE6? I’m showing it fine in my version of IE6… please send me a screenshot: info@13styles.com. Thanks!

  3. rightstufryan Says:
    February 22nd, 2008 at 3:24 am

    Help! The light blue over-state does not extend all the way to the bottom of the nav bar. What the heck am I doing wrong?

  4. toddynho Says:
    February 22nd, 2008 at 2:12 pm

    can you post your code or email it to info@13styles.com? I’d be happy to check it out for you.

  5. Paul Says:
    February 29th, 2008 at 6:15 pm

    I’ve implemented this on an intranet page and is working perfectly. However, I’m having trouble centering the whole nav bar. Which styles do I have edit or add in order for this to work?

  6. tony ventura Says:
    March 29th, 2008 at 1:44 am

    oh my god this menu poped my website !

    the malfunctions ………oh godd

  7. tuofa Says:
    April 16th, 2008 at 1:56 am

    can you post your code or email it to tuofa@yahoo.com? I’d be happy to check it out for 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