In this post I am going to explain you that how to make a nice vertical menu with light weight CSS (i.e. 2kb). This menu is fully compatible with all standard browsers like IE6-7, Mozilla Firefox, Opera and Safari.
Some time back I wrote tutorial about How to Design a Nice Vertical Menu with CSS where I couldn't used working example. Now this time I am going to show you working example.
I have used one image, some lines of html and a 2kb CSS to make this menu. Here's final menu look that we are going to acheive:
WHAT DO YOU WANT TO DO?
Use following html code:
<div id="leftNav"><!--leftNav Start-->
<div class="header">WHAT DO YOU WANT TO DO?</div>
<ul><li ><a href="#">This is task one</a></li>
<li><a href="#">Task two</a></li>
<li><a href="#">Task three</a></li>
<li ><a href="#">Task four</a></li>
<li><a href="#">Task Five</a></li>
<li><a href="#">Task six</a></li>
<li><a href="#">Task seven</a></li>
<li style="border-bottom:none;"><a href="#">This is final result</a></li></ul></div><!--leftNav End-->Attach following CSS in your page between <head></head> tag:
#leftNav {float: left; width: 231px; border: 1px solid #c9c9c7; margin-bottom: 10px; font-family:Geneva, Arial, Helvetica, sans-serif;}
#leftNav .header{float:left; width:231px; height:20px; padding-top:4px; background:url(Images/leftMenu-header-bg.gif) repeat-x; text-align:center; color:#344f6f; font-size:13px; font-weight:bold; border-bottom:1px solid #a7b4c3;}
#leftNav ul{margin:0px; padding:0px; width:231px;}
#leftNav ul li{margin:0px; padding:0px; font-size:11px; height:24px; width:231px; color:#364e70; border-bottom:1px solid #a7b4c3; float:left; list-style-type:none;background:#cad2df; border-top:1px solid #dbe3ec;}
#leftNav ul li a{ text-decoration:none;padding-top:5px; height:19px; width:226px; text-indent:14px; background:#cad2df; color:#364e70; list-style-type:none; position:absolute;border-left:5px solid #828fa6;}
#leftNav ul li a:hover{text-decoration:underline; font-weight:bold; padding-top:5px; height:19px; width:226px; background:#394a63; color:#cad2df; border-left:5px solid #1c3552;}Copy following image in your image folder:
Thats all. Thanks.
Do you have any problem to implement, leave a comment.
Subscribe to TutorialFeed via RSS
0 comments :
Post a Comment