Advertisement
Tutorial #6: CSS vertical navigation tutorial
This is a nice and elegant way to build vertical mavigation. Based on UL list with LI elements for each link, this structure is simple and easy to use. The CSS tutorial was tested in IE6, Firefox 2 and Safari and it works fine! Now you can get it for free and customize it for your own needs.
Note, in this tutorial i use here the <span> tag for changing the text color of the links. If you want to change only their background color, just remove these tags and also the last part in the CSS code.
menu_example.css
.mymenu {
width: 190px; /*width of menu*/
font-size:12px;
font-family:Verdana;
}
.mymenu .title {
font-weight:bold;
color: white;
background: #2764c2 url(bullet.gif) no-repeat 7px 7px;
margin-bottom: 0;
text-transform: uppercase;
padding: 7px 0 7px 27px;
}
.mymenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.mymenu ul li {
margin-top: 2px; /*spacing between menu items*/
}
.mymenu li a {
padding: 5px;
width:180px; /*because we have padding:5 - 190px-10px*/
display:block;
background-color: #E9E9E9;
text-decoration: none;
}
.mymenu li a:hover {
background-color: #193560;
text-decoration: none;
}
.mymenu li a span {
color:#003399;
}
.mymenu li a:hover span { /*hover menu item*/
color: #ffffff;
}
How to use it in HTML
<div class="mymenu">
<div class="title">main menu</div>
<ul>
<li><a href="/index.php"><span>Home</span></a></li>
<li><a href="/CSS-based-horizontal-navigation/"><span>Horizontal navigation</span></a></li>
<li><a href="/CSS-based-vertical-navigation/"><span>Vertical navigation</span></a></li>
<li><a href="/CSS-based-text-boxes/"><span>Text boxes</span></a></li>
<li><a href="/contacts/"><span>Contacts</span></a></li>
</ul>
</div>
Files used in this tutorial: 
vertmenu.rar