Monday, May 25, 2009

How to Design a Nice Vertical Menu with CSS

In this tutorial I would like to teach you how to design a Vertical Menu with the help of little CSS. This is very nice Vertical Menu style tutorial for beginners.

In this Vertical Menu you'll see mouse over effect on sub menus, which is very interesting and you'll always love to learn through out this tutorial.

Here's a image of Vertical Menu that we are going to learn:



















For this I am using following two images with css:


Menu Top bg

Menu Selected



I am using following CSS to design a Vertical Menu:


.main_cont
{
float:left;
width:220px;
background-color:#4d7986;
padding:10px;
}

.menu_top_bg
{
width:223px;
background:url(../grfx/menu_top_bg.gif) repeat-x;
height:22px;
padding-top:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
margin-bottom:1px;
}

.sub_menu ul
{
padding:0px;
margin:0px;
}

.sub_menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
line-height:32px;
border-bottom:1px dotted #93bcc3;
list-style-type:none;
text-indent:8px;
}

.sub_menu ul li a
{
text-decoration:none;
color:#FFFFFF;
}

.sub_menu ul li a.selected
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}

.sub_menu ul li a:hover
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}



Use following code to attach above CSS manually to HTML document:

<link href="css/left_menu.css" rel="stylesheet" type="text/css" />


Use following HMTL to get a final result:

<div class="main_cont">
<div class="menu_top_bg">TOP HEADER TEXT</div>
<div class="sub_menu">
<ul>
<li><a href="#" class="selected">Menu Text 1</a></li>
<li><a href="#">Menu Text 2</a></li>
<li><a href="#">Menu Text 3</a></li>
<li><a href="#">Menu Text 4</a></li>
<li><a href="#">Menu Text 5</a></li>
<li><a href="#">Menu Text 6</a></li>
</ul>
</div>
</div>


Now you are done. If you find any difficulty to implement above code please leave a comment.

Related Posts :





2 comments :

alexander said...

Seems to useful, but a working example would be much nicer than a plain image.

Anonymous said...

Where am I supposed to locate the images? (folder) Code doesn't seem to locate them! Any way, thanks for the tutorial.

Post a Comment

 

Copyright © 2009 - tutorialfeed.org