Get a favicon spot!

CSS Menus - Time 4 Bed Menu

Pre-built in white/orange. Clean and simple. 3 Images.

Get it… the names comes from the fact that I should be sleeping right now… Download the source code below.

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 6KB
  • 3 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. As you can see, the UL is tagged with the “simple-menu” ID. The “Home” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
#time4bed-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("/code/time4bed/images/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}
#time4bed-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#time4bed-nav ul li{display:block;float:left;margin:0 2px;}
#time4bed-nav ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}
#time4bed-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}
#time4bed-nav ul li a:hover{color:#fff;}
#time4bed-nav ul li a:hover span{display:block;cursor:pointer;}
#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{color:#894d12;background:transparent url("/code/time4bed/images/time2bed_left-ON.gif") no-repeat top left;}
#time4bed-nav ul li a.current span{background:transparent url("/code/time4bed/images/time2bed_right-ON.gif") no-repeat top right;height:43px;}
–>
</style>

HTML

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

« Simple Menu
Flickr »

7 Responses to “Time 4 Bed Menu”

  1. Damien Says:
    February 19th, 2008 at 5:26 pm

    This does not seem to work in internet explorer 6

  2. David Jacques-Louis Says:
    February 23rd, 2008 at 11:31 am

    And not in FF3

  3. Damien Says:
    February 25th, 2008 at 5:07 pm

    I think I fixed it for IE6
    added line

    #time4bed-nav ul li a span{margin-bottom: -10px;}

  4. Sparky Says:
    March 2nd, 2008 at 5:47 pm

    How to centre this menu? :/

  5. Maxim Says:
    March 28th, 2008 at 9:48 am

    Does it work in IE? Pls help.

  6. BMWguy Says:
    April 3rd, 2008 at 1:39 am

    Works fine in FF3 beta. check your code

  7. Cody Says:
    May 11th, 2008 at 11:32 pm

    Yes works OK in FF3 beta.

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