Vert-One CSS Menu
Tweet
The first vertical menu to be added to the site.
What I like about this one 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.
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
Other Notes
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.
DEMO
CSS MENU
<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("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/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("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/vert-one_arrow.gif") no-repeat 0 9px;}
</style>
HTML MENU
<div id="menucase">
<ul>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Home</a></li>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Articles</a></li>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Topics</a></li>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Forum</a></li>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Blog</a></li>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Subscribe</a></li>
<li><a href="http://www.phpasks.com/blogs/vert-one-css-menu/" title="CSS Menus">Contact Us</a></li>
</ul>
</div>
No comments yet.