As we all know that for providing navigation to the user,we use navigation menu on our websites. Today i am going to show you how you can easily create a navigation menu for your website. Let's start with HTML
HTML Code :
<html>
<head>
<title>Navigation Menu</title>
</head>
<body>
<ul id="nav">
<li><a href="#" >Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Company</a></li>
</ul>
</body>
</html>
This is our menu list. Now lets apply the magic of CSS.
CSS Code :
#nav{
width: 960px;
margin: 80px auto;
text-align: center;
}
#nav ul{
margin: 0;
padding: 0;
}
After adding this CSS you'll get something like above.the code specifies the alignment of the menu which is center and width and the margin. Now lets add some more code,
#nav li{
margin: 0 10px; /* Add some horizontal spacing */
display: inline-block;
*display: inline; /* IE7 and below */
}
the above code will give you this
Now we got the basic layout of our menu. Let's add styling it with color.
#nav a{
display: inline-block;
position: relative;
padding: 8px 15px;
border: 2px solid #ddd;
text-decoration: none;
color: #999;
font: bold 14px 'Lucida sans', Arial, Helvetica;
background-color: #000;
background-image: linear-gradient(top, #eaeaea, #fff);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0 rgba(0, 0, 0, .2),
0 2px 2px rgba(0, 0, 0, .3),
0 10px 10px -5px rgba(0, 0, 0, .2);
}
The above code will give the coloring to our menu.I have used box-shadow to give some good effect to our menu. Above code will give you the below result
Now that we've got our menu. Let's give some hovering effects to it.
#nav a:hover{
background-color: #eaeaea;
background-image: linear-gradient(top, #000, #000);
}
#nav a:active{
top: 1px; /* Simulate the push button effect */
background: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0px rgba(0, 0, 0, .2),
0 1px 2px rgba(0, 0, 0, .3);
}
That's it. You've got your menu. You might see that i've given some good horizontal space. you may reduce it by decreasing the margin value in #nav li{}. Hope you like it and share it.
