Get your spot

Time 4 Bed CSS Menu



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>