Get a favicon spot!

CSS Menus - Style #2

Pre-built in grey/blue.

This menu is called “Style2″ 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">
<!–
#styletwo{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;background:transparent url(/code/style2/images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;}
#styletwo ul{margin:0;padding:0;list-style-type:none;width:auto;}
#styletwo ul li{display:block;float:left;margin:0 1px 0 0;}
#styletwo ul li a{display:block;float:left;color:#000;text-decoration:none;padding:6px 20px 0 20px;height:24px;}
#styletwo ul li a:hover,#styletwo ul li a.current{color:#fff;background:transparent url(/code/style2/images/bgON.gif) repeat-x top left;}
–>
</style>

HTML

<div id="styletwo">
	<ul>
		<li><a href="http://www.13styles.com/css-menus/style2/" title="css menus">Home</a></li>
		<li><a href="http://www.13styles.com/css-menus/style2/" title="css menus">About Us</a></li>
		<li><a href="http://www.13styles.com/css-menus/style2/" title="css menus" class="current">Services</a></li>
		<li><a href="http://www.13styles.com/css-menus/style2/" title="css menus">Our Work</a></li>
		<li><a href="http://www.13styles.com/css-menus/style2/" 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 #4
Style #1 »

18 Responses to “Style #2”

  1. David Says:
    January 9th, 2008 at 3:08 pm

    Thanks for the great free code. I am new to css but learning very quickly. However, I do have a quick question about positioning this menu.

    Right now the menu sits on the left side of the page and the gray BG grows and extends
    all the way to to the right edge of the page. How can I limit the size of the gray bar to say 777px
    and then center the menu on the page (under the rest of my containers?

    Thanks for your generosity and help.

    David

  2. toddynho Says:
    January 10th, 2008 at 12:57 am

    Hi David,

    You will want to add this to the #styletwo ID:

    margin:0 auto;width:777px;

    There may be a better way to do this if I was able to see your code, but this should work fine. We set the margin to 0 for the top and bottom and the “auto” for the left and right, and as long as whatever contains the div#styletwo has the “text-align:center;” property, you should be all set. if this doesn’t work, send me your code and I’ll help you out.

  3. David Says:
    January 10th, 2008 at 4:24 am

    That took care of the positioning. Now the menu is in perfect alignment with the rest of my header elements and it looks great.

    Thanks again for the free code, expert help and goodwill.

    David

  4. E Says:
    January 22nd, 2008 at 11:55 pm

    I would like to add this menu to my web site but it will not “center”. I used your previously posted tips about #styletwo ID tweak set to “margin:0 auto;width:777px” but it still will not work. I am using IE6 but it must work for IE and Firefox. Can you help me? In return I will post a link to your site and a “workaround” crediting your page. My code is simply the code you use for your demo. (only the menu portion) the rest of the html I can generate later.
    ”

    Home
    About Us
    Services
    Our Work
    Contact Us

    “

  5. e Says:
    January 23rd, 2008 at 6:28 am

    My question was REMOVED! I wanted to know why my “centering” is not working. I left code and concern but you removed it.
    Can you please tell me how to center my menu. I am using IE6 but it needs to work on IE and Firefox.

  6. toddynho Says:
    January 23rd, 2008 at 1:01 pm

    Hi E, I didn’t delete your comment, I just have the comments set to manual approve to hep with spam and stuff.

    Did you catch that part of the comment above that said “and as long as whatever contains the div#styletwo has the “text-align:center;” property, you should be all set.”

    So, you’ll need the menu’s containing div to have the property text-align:center; for the margin:0 auto;width:[x]px; to work properly.

  7. E Says:
    January 24th, 2008 at 10:10 pm

    Thanks but doesn’t “#menucase” contain “#styletwo” in your demo? I am using the same code and added text-align:center and margin:… to it but perhaps you can show me the code I need. I might be overlooking something silly. my code is as follows without the tags (it renders)
    here is the code:

    #styletwo{position:absolute;display:block;height:24px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;margin:0 auto;text-align:center;
    width:777px;
    }

    #menucase{margin:0 auto; text-align:center;}

    #styletwo ul{padding:0;list-style-type:none;margin:0 auto;text-align:center;width:777px;}

    #styletwo ul li{display:block;float:left;margin:0 1px 0 0;}

    #styletwo ul li a{display:block;float:left;color:#000;text-decoration:none;padding:6px 10px 0 10px;height:24px;}

    #styletwo ul li a:hover,#styletwo ul li a.current{color:#fff;background:transparent url(images/bgON.gif) repeat-x top left;}

    Home
    About Us
    Services
    Our Work
    Contact Us

  8. E Says:
    January 24th, 2008 at 10:12 pm

    Thanks but doesn’t “#menucase” contain “#styletwo” in your demo? I am using the same code and added text-align:center and margin:… to it but perhaps you can show me the code I need. I might be overlooking something silly. my code is as follows without the tags (it renders)
    here is the code:

    #styletwo{position:absolute;display:block;height:24px;font-size:11px;font-weight:bold;background:transparent url(images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;margin:0 auto;text-align:center;
    width:777px;
    }

    #menucase{margin:0 auto; text-align:center;}

    #styletwo ul{padding:0;list-style-type:none;margin:0 auto;text-align:center;width:777px;}

    #styletwo ul li{display:block;float:left;margin:0 1px 0 0;}

    #styletwo ul li a{display:block;float:left;color:#000;text-decoration:none;padding:6px 10px 0 10px;height:24px;}

    #styletwo ul li a:hover,#styletwo ul li a.current{color:#fff;background:transparent url(images/bgON.gif) repeat-x top left;}

    body>
    link href=”style.css” rel=”stylesheet” type=”text/css” />
    div id=”maincol”>
    div id=”menucase”>
    div id=”styletwo” >
    ul>
    li>a href=”#.html” title=”">Home/a>/li>
    li>a href=”#.html” title=”">About Us/a>
    li>a href=”#.html” title=”">Services/a>
    li>a href=”#.html” title=”">Our Work/a>
    li>a href=”#.html” title=”">Contact Us/a>/li>
    /ul>
    /div>/div>/div>
    /body>

  9. toddynho Says:
    January 25th, 2008 at 3:24 pm

    Hi E,

    replace your css with the following:

    #menucase{text-align:center;}
    #styletwo{position:relative;margin:0 auto;text-align:left;display:block;height:24px;font-size:11px;font-weight:bold;background:transparent url(/code/style2/images/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;}
    #styletwo ul{margin:0;padding:0;list-style-type:none;width:auto;}
    #styletwo ul li{display:block;float:left;margin:0 1px 0 0;}
    #styletwo ul li a{display:block;float:left;color:#000;text-decoration:none;padding:6px 20px 0 20px;height:24px;}
    #styletwo ul li a:hover,#styletwo ul li a.current{color:#fff;background:transparent url(/code/style2/images/bgON.gif) repeat-x top left;}

  10. E Says:
    January 28th, 2008 at 4:12 pm

    Sorry for the bother but it still is not working. Are you testing this on IE6 SP2?
    It just will not work despite how many “text-align” I set to “center”. Thank you anyway. If you do find a solutition, will you post it here? I will check back periodically. For now I guess I will settle for a less-than-expectations menu.

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

    Hi E, can you email me your code instead of posting it here? I’ll help get this working and then I’ll post the fix to the site here… thanks for your help!

  12. Troy Says:
    February 18th, 2008 at 11:59 pm

    Just wanted to point out that the ‘index’ file in the ‘download.zip’ does not show the menu properly in IE 6. I think the head tags are missing or messed up. Thanks for the awesome free menus though…

  13. Katy Says:
    March 14th, 2008 at 4:31 pm

    How can I align the menu to the right without making the list go backwards?

  14. Tim Says:
    March 25th, 2008 at 3:19 pm

    Great time saver, just the lay up i needed / want.

    Tim

  15. Manoj Says:
    March 25th, 2008 at 10:48 pm

    thanks for amazing menu. sorry, but i enterd fake email and website to protect from spam.

  16. Jack Says:
    March 31st, 2008 at 8:16 pm

    @Katy
    You really can’t get this to work unless you change the list order. You could go through and change the elements that float (eg NOT the li items) but that will change the entire menu. At best you could try using a container div around the ul/li and floating that right. But make certain t check it n all browsers.

  17. tuofa Says:
    April 16th, 2008 at 2:01 am

    just the lay up i needed / want

  18. 294b2c6e0a17 Says:
    May 11th, 2008 at 5:18 am

    294b2c6e0a17…

    294b2c6e0a179e473874…

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