CSS3 NAVIGATION MENU FOR BLOGGER

Sky beauty is pure css navigation menu.It is made by Aumkar Thakur (Me),Sky beauty is divided into two part one is up to down and one is left to right,i know you don't understand this but when you will see live demo then you are going to understand it.

Demo 1

Demo 2

Now lets start making it.first of all you have to put html code in your blogger.

• Go to blogger dashboard.
• Now click on Layout tab.
• Now add html/javascript below title of blog.
• Paste the following code there and save it.

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Now we need to add css to make it beautiful.To add css follow below steps.

• Go to blogger dashboard.
• Click on template tab.
• Click on Customize button.
• Go to Add Css and add the following code there.

For left to right

#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: arial;
color:#fff;
margin-left: -5px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikO__15zyQlv7jlfYchQdxsDulK8wif-c0umh68BGc4o2cMuF3TIxwnU883jO3ywNUSwYjztF4XlF-N111oKIhj9R96Kl4hUmNS4TZAZC1NlVCDMhsNSqUtDaikT67fpbyElt7pL9YT3E/s1600/menubg1.PNG');
background-position: left;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#menu li a:hover {
background-position:right;
}

For up to down

#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBK-yQT3ofYsaRyLsU5af4jBOupEL0J1zK48lgKMCf24i15VjqNbAHmpsKnDXV6Rz3NH8uX5ynroH48drMrCJZo3cJI-6PVSkbeF-_iPRdqn_QZt4LBWGgl02k1b9vggPptlkgQmsc3Us/s1600/menubg2.PNG ');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}

Now click on save button and enjoy your cool css navigation menu :))