On February - 20 - 2011
Today, in this tutorial i will teach you how to create a simple but best Green Vertical Navigation Menu using only Css…
Lets Start the Beginning
First of all we have to design the html, Copy & Paste the below code in the “<body>” tag of your html file:
<div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Support</a></li> <li><a href="#">Categories</a></li> <li><a href="#">All Downloads</a></li> <li><a href="#">Latest Updates</a></li> <li><a href="#">Report an Error</a></li> </ul> </div>
Styling The Navigation
Okay, now lets start the navigation menu, make the padding and margin to zero, add the following css in your “<head>” tag of your html file, or add it into your “.css” file;
#menu {
margin:0;
padding:0;
}
Now lets style the “<ul>” of the Navigation Menu, add the following Css:
#menu ul{
width: 180px;
margin:0;
padding:1px;
border:1px solid #cfe7aa;
}
Styling the “<li>” of the Navigation Menu, add the following Css:
#menu li{
display:block;
list-style:none;
padding-bottom:1px;
}
Styling the “<li> a” of the Navigation Menu, add the following Css:
#menu li a{
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
font-weight:bold;
color:#679b14;
text-shadow:#FFF 1px 1px 1px;
text-decoration:none;
background-color:#cfe8a7;
padding:5px;
border-left:10px solid #a3d15a;
}
Styling the “a:hover”, add the following Css:
#menu li a:hover{
border-left:14px solid #a3d15a;
background-color:#c3dd9a;
}
and Thats it we are finished!
Putting all Css Together
#menu {
margin:0;
padding:0;
}
#menu ul{
width: 180px;
margin:0;
padding:1px;
border:1px solid #cfe7aa;
}
#menu li{
display:marker;
list-style:none;
padding-bottom:1px;
}
#menu li a{
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
font-weight:bold;
color:#679b14;
text-shadow:#FFF 1px 1px 1px;
text-decoration:none;
background-color:#cfe8a7;
padding:5px;
border-left:10px solid #a3d15a;
}
#menu li a:hover{
border-left:14px solid #a3d15a;
background-color:#c3dd9a;
}