Simple Verticale Menu Tutorial
This is a very simple, verticale css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect.
Step : 1
First of all let us write CSS code for menu. here goes the code..
#nav ul { margin:0; padding:0; list-style-type:none; }#nav ul li { display: inline; /*IE 6*/ }#nav ul li a { display:block; background:#d9d9d9; width:200px; text-decoration:none; padding:4px/*padding for top, bottom*/ 7px /*padding for left, right*/; border-bottom:1px solid #eeeeee; border-top:1px solid #cccccc; border-left:5px solid #333333; color:#333333;#nav ul li a:hover { border-left-color:#0099FF; color:#0066FF; background:#c4c4c4; }
Step : 2
Now we create a basic html structure.
Yeah..! its done! see how simple is to create a CSS menu… A demo..?
Promote Us
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
Loading...
cihipsays on : September 6th, 2010 at 11:12 am Said:
Simple Verticale Menu Tutorial post for thanx.
iPhonesays on : October 24th, 2011 at 8:01 am Said:
Nice blog right here! Also your website quite a bit up very fast! What web host are you using? Can I am getting your associate hyperlink for your host? I desire my website loaded up as fast as yours lol
iPhone´s last 1 ..1
Thomassays on : December 7th, 2011 at 9:42 pm Said:
Hello guys! If you want to make this menu even better, you can add a little trick called -transition-. As seen down below, in the css… the -webkit- and -moz- make a transition between the “regular” state and “hover”. This makes your menu look a little bit better, because the colors will fade in. If you want a slower effect: make the “all 0.2s ease;” smaller… like 1.0 or make it faster like 0.1
Hope it helps!
#nav ul li a {
display:block;
background:#d9d9d9;
width:200px;
text-decoration:none;
padding:4px/*padding for top, bottom*/ 7px /*padding for left, right*/;
border-bottom:1px solid #eeeeee;
border-top:1px solid #cccccc;
border-left:5px solid #333333;
color:#333333;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}