CSS Menus - Vert-one

Pre-built in maroon. Only 1 image file for arrow. Clean and simple. Vertical.

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>

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.

7 Responses to “Vert-one”

Evandro Says:
January 28th, 2008 at 7:32 pm
Very useful! Thank’s Evandro
Downfall Studios. - Graphic Design Forum and Web Design Forum Says:
February 4th, 2008 at 8:35 am
[…] Us</a></li> </ul> </div> Will create a nicer menu like this with only half the code. And I’m hoping you’ve got hosting because free web banners of a site is a […]
fest Says:
February 17th, 2008 at 10:21 pm
Thanks for the menu. It works excellent.
However, you have a wrong link for this menu in the main page- the link on the image
works fine, but the link of caption beneath it points to another menu.
Troy Says:
February 19th, 2008 at 1:42 am
When I copy the source code and html from this page, the results are not what they should be. The bullets still show, and the borders between each span 100% across the page. (Using IE 6)
AhTu Says:
March 19th, 2008 at 1:39 pm
Hi all,

Can anyone point to me how to customize this greate menu so to have sub-menus?

Any advise thanks in advance.
Yvan Says:
April 14th, 2008 at 12:09 pm
Nice, simple and not ugly!
Very good done!
Thanks!
Cody Says:
May 11th, 2008 at 11:37 pm
Great and really nice one again.
Thanks!

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