13Styles.com - Vert-one
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.

License Info: This is a FREE menu style
You can use this menu on commercial websites.
How to Use: Unzip the file and extract its contents.

Copy and paste the menu code in the "menu.html" file into the correct spot for your menu.

Either include the CSS file in your HTML document or copy and paste the CSS menu code found in the "style.css" file into your CSS file.

Copy the images into your image directory. If this path is different than "images/[image_name].gif", make sure you edit the necessary lines in the CSS file that reference those images.
Submitted: 1 Year, 2 Months, 1 Week, 1 Day, 7 Hours, 26 Minutes ago
Submitter: avatar  aycarumba
Style Rating:

7.0/10 (1 vote cast)


Style Author: 13Styles.com
Author's URL: http://13Styles.com

Demo URL: http://www.13styles.com/css-me...

Resource Files

filetype   vert-one_arrow.gif  [0.1 KB]

save all   download all files as a zip

Code Snippets 
<style type="text/css">

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;}

ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;
border-bottom:1px solid #761A1A;}

ul.vert-one li a{display:block;text-decoration:none;color:#fff;
background:#600;padding:0 0 0 20px;width:180px;}

ul.vert-one li a:hover{
background:#900 url("images/vert-one_arrow.gif") no-repeat 0 9px;}

ul.vert-one li a.current,ul.vert-one li a.current:hover{
background:#933 url("images/vert-one_arrow.gif") no-repeat 0 9px;}

</style>

<ul class="vert-one">

<li><a href="http://www.13styles.com" title="CSS Menus">Home</a></li>

<li><a href="http://www.13styles.com" title="CSS Menus">Articles</a></li>

<li><a href="http://www.13styles.com" title="CSS Menus" class="current">Topics</a></li>

<li><a href="http://www.13styles.com" title="CSS Menus">Forum</a></li>

<li><a href="http://www.13styles.com" title="CSS Menus">Blog</a></li>

<li><a href="http://www.13styles.com" title="CSS Menus">Subscribe</a></li>

<li><a href="http://www.13styles.com" title="CSS Menus">Contact Us</a></li>

</ul>


Comments (0)
No comments have been posted for this style

Add A Comment


Some bbcode allowed - [code][/code], [b][/b]

Name:
 (required)
Email:
 (required - will not be published)
Website:
Comment:
Security Code: Enter the characters in the green box

Visual CAPTCHA