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.

css-vertical-menu

Step : 1

First of all let us write CSS code for menu. here goes the code..

[code lang="css"]
#nav ul {
margin:0;
padding:0;
list-style-type:none;
}
[/code]

[code lang="css"]
#nav ul li {
display: inline; /*IE 6*/
}
[/code]

[code lang="css"]
#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;
[/code]

[code lang="css"]
#nav ul li a:hover {
border-left-color:#0099FF;
color:#0066FF;
background:#c4c4c4;
}
[/code]

Step : 2

Now we create a basic html structure.

[code lang="htmlstrict"]
 
[/code]

Yeah..! its done! see how simple is to create a CSS menu… A demo..?

3 thoughts on “Simple Verticale Menu Tutorial

  1. iPhone

    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 =-.

  2. Thomas

    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;

    }

Leave a Reply

Your email address will not be published. Required fields are marked *