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>

The Menu

FAQ

• You can customize this menu to be any color you wish
• Entire menu system is less than 1KB
• 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 and css. 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">
<!–
#demo-container{padding:25px 15px 0 15px;margin:0 0 15px 0;background:#67A897;}
ul#simple-menu{list-style-type:none;width:100%;position:relative;height:27px;font-family:"Trebuchet MS",Arial,sans-serif;font-size:13px;font-weight:bold;margin:0;padding:11px 0 0 0;}
ul#simple-menu li{display:block;float:left;margin:0 0 0 4px;height:27px;}
ul#simple-menu li.left{margin:0;}
ul#simple-menu li a{display:block;float:left;color:#fff;background:#4A6867;line-height:27px;text-decoration:none;padding:0 17px 0 18px;height:27px;}
ul#simple-menu li a.right{padding-right:19px;}
ul#simple-menu li a:hover{background:#2E4560;}
ul#simple-menu li a.current{color:#2E4560;background:#fff;}
ul#simple-menu li a.current:hover{color:#2E4560;background:#fff;}
–>
</style>

HTML

<div id="demo-container">
<ul id="simple-menu">
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home" class="current">Home</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Resources</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Inspiration</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Community Forums</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">About Us</a></li>
<li><a href="http://www.13styles.com/css-menus/simple-menu/" title="Home">Contact Us</a></li>
</ul>
</div>
 
 

The Menu

FAQ

• You can customize this menu to be any color you wish
• Entire menu system is less than 3KB
• 1 image file, 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">
<!–
#menucase ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;width:200px;}
#menucase ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;border-bottom:1px solid #761A1A;}
#menucase ul.vert-one li a{display:block;text-decoration:none;color:#fff;background:#600;padding:0 0 0 20px;width:180px;}
#menucase ul.vert-one li a:hover{background:#900 url("/code/vert-one/images/vert-one_arrow.gif") no-repeat 0 9px;}
#menucase ul.vert-one li a.current,ul.vert-one li a.current:hover{background:#933 url("/code/vert-one/images/vert-one_arrow.gif") no-repeat 0 9px;}
–>
</style>

HTML

<div id="menucase">
	<ul class="vert-one">
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus">Home</a></li>
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus">Articles</a></li>
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus" class="current">Topics</a></li>
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus">Forum</a></li>
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus">Blog</a></li>
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus">Subscribe</a></li>
		<li><a href="http://www.13styles.com/css-menus/vert-one/" title="CSS Menus">Contact Us</a></li>
	</ul>
</div>

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 5KB
• 4 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">
<!–
ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("/code/saturday/images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#saturday li{display:block;float:left;margin:0;pading:0;}
ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("/code/saturday/images/bgDIVIDER.gif") no-repeat top right;}
ul#saturday li a:hover{background:transparent url("/code/saturday/images/bgHOVER.gif") no-repeat top right;}
ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("/code/saturday/images/bgON.gif") no-repeat top right;}
–>
</style>

HTML

<div id="menucase">
	<ul id="saturday">
		<li><a href="" title="">Home</a></li>
		<li><a href="" title="">About Us</a></li>
		<li><a href="" title="" class="current">Services</a></li>
		<li><a href="" title="">Our Work</a></li>
		<li><a href="" title="">Contact Us</a></li>
	</ul>
</div>

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.
• 5 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 “About Us” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(/code/dolphin/images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(/code/dolphin/images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(/code/dolphin/images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(/code/dolphin/images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
–>
</style>

HTML

<div id="dolphincontainer">
	<div id="dolphinnav">
		<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" class="current"><span>About Us</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><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>