CSS and jQuery Animated Navigation Menu for Blogger

Previous we posted about a stylish navigation menu for blogger and we got inspiration from that article. Of course we will continue, tutorials about blogging. Now we are going to show you a different navigation menu from previous menu tutorial. This navigation menu with CSS and jQuery animated. Menu button's will increase from the current padding with some pixels number.
So, when the viewers mouseover the button we will add its padding to make it wide and decrease the button’s opacity when user click it.
                                                              

                                                            Live Demo

CSS

1. Paste the following css code before the ]]></b:skin>

#menu-css li {

display: inline;

list-style: none;

}

#menu-css li a {

/* Border Radius */

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

/* Border Shadow */

-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

box-shadow: 1px 2px 2px rgba(0,0,0,0.6);

/* Animation (Webkit, Gecko & Mozilla) */

-webkit-transition-duration: 0.20s;

-webkit-transition-timing-function: ease-out;

-moz-transition-duration: 0.20s;

-moz-transition-timing-function: ease-out;

color: #ffffff;

background: #0158a9;

display: inline-block;

padding: 5px 15px;

outline: none;

text-decoration: none;

        font-weight: bold;    

}

#menu-css li a:hover {

background: #b20000;

padding: 5px 25px;

}

#menu-css li a:active {

background: #ff0000;

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);

-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);

box-shadow: 1px 1px 1px rgba(0,0,0,0.4);

}

2. Paste the Following code before the </head>.

<script type='text/javascript'>$(document).ready(function() {

$(&#39;#menu-jquery li a&#39;).hover(

function() {

$(this).css(&#39;padding&#39;, &#39;5px 15px&#39;)
 .stop()
 .animate({&#39;paddingLeft&#39; : &#39;25px&#39;,
 &#39;paddingRight&#39; : &#39;25px&#39;,
 &#39;backgroundColor&#39;:&#39;rgba(0,0,0,0.5)&#39;},
 &#39;fast&#39;);
},

function() {

$(this).css(&#39;padding&#39;, &#39;5px 25px&#39;)
 .stop()
 .animate({&#39;paddingLeft&#39; : &#39;15px&#39;,
  &#39;paddingRight&#39; : &#39;15px&#39;,
  &#39;backgroundColor&#39; :&#39;rgba(0,0,0,0.2)&#39;},
  &#39;fast&#39;);

}).mousedown(function() {

$(this).stop().animate({&#39;backgroundColor&#39;: &#39;rgba(0,0,0,0.1)&#39;}, &#39;fast&#39;);

}).mouseup(function() {

$(this).stop().animate({&#39;backgroundColor&#39;: &#39;rgba(0,0,0,0.5)&#39;}, &#39;fast&#39;);
});
});
</script>

3. Click the SAVE TEMPLATE.

HTML
4. Add Following HTML code. ( Design > Page Elements > Add a Gadget > HTML/JavaScript )

<ul id="menu-css">
<li><a href="#">Home</a></li>

<li><a href="#">About</a></li> 

<li><a href="#">Contact</a></li> 

<li><a href="#">Advertise</a></li>

<li><a href="#">Write for us</a></li> 

</ul>

Important :- Replace # with your Link and change title your wish.. Save it 

Share and Enjoy!

• Facebook
• Twitter
• Google Buzz
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati