Get your spot

Vert-one CSS Menu



Let’s be honest, this menu isn’t anything unique or special… but it was time to get a vertical menu on the site. What I do like about it is that it can serve as a good foundation for someone trying to build something with a little more style. The CSS/XHTML is very clean and easy to understand. There is only 1 image for this menu too, so you won’t need to open up Photoshop to customize the menu.

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>