jQuery Slide Down Navigation For Blogger

In this post I am here with a beautiful  dropdown Menu Bar created with jQuery. Drop down menus provide easy and neat navigation by organizing and featuring important category links of your blog. With increased use of categories and tags, organizing links in a simple menu is difficult therefore the menu that we share today provides you with easy control over its column and rows display. The top bar menu instruction below are for blogger users only. So Read All Step Carefully Dropdown menu work Perfect. See Live Demo on our demo blog and check it our Drop Down Animated Effect. 

How to add in blogger?

• Go To Blogger > Template > Edit HTML > Search for </head> :

• Just above  </head>  paste following script :
  

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

• Now search for ]]></b:skin> and just above it paste following CSS : 

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;  
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;    
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTeXmZIQEzqm7CGXMREWS3ANMujT3_g8Sj3aiCu0b_iFgm4gWDmuRiSkYMHwZmZfLZEB3-vDOq4d-29AuPh5FTc-I7fvSHkvnDP3Prz7F259YA04YvDDSB-4XQJ0OKBfIR5CUo1GHbSyA/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqo2ynFiDFur9_a1VFT9DS9SEKvQpZtzpTHCb9kCQxph-Rd4Rorh5Sod7lwsCqhYItwf4nElfP6mTy-zP2lP94vNlTE8FYmpW9RbPmWpNKB_WO31tmSNx8P3eroUMm-p5nEEj0iXa_y8Y/s1600/id_card.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSXapyuP-6GQqHJ7hZCkQloULgc2o6lqySdADiKnZwuRVVVd0N3ty4nudfR7BfeXa1ILEhMk-hy8tYOa2bnKf39mA-PvJBGYN4nEoMVAvv1Fyhtd5YJPiCWNkpgU5cc-5NSgVnessshk/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh35tC-ijxx5XZAaYJYJfjFW0SEIa8OY-MF6fvtMOr1nwSfkuheyUtUs-0om1NUlP3z8s0fG6WLQHvq3nmRpviuKAY5z5nMpMpEMX2n1po8SCRCP0veTViBlb-ODw4n-LuWgMJ2bd4Pacg/s1600/news.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjILMv71Wz9by_7WbkTTrUr7L6XEIcQeDFFjCYEI12yGNuA2B_6mIEHvN0cyZb1YJrDsNOazijpNmj9Wbbtz3Xf3TLBszCBjJxls71PfTPWt1pPdEbSRHrj8iWYTJv8ZfMdiiLCPrUIyKM/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXyBL1GGLtp5pJ7ymfTy4uZ9xSaVTWZc3Ak7HBLWIEXqg9lJshU9ImyQArojDmt03gSvtHjqc8BejbkAd47pZi2jWCC4_7ivnYx0KeYCkF9ZtR35TAfTVGtBni5vsDLV-ocEShchyphenhyphenY-c/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1MR37R8VFKb3R8_HfziMKvOc7UzgU01vdyfiWlfTRNwgxTMWPZDzljLwB0RLIkWQQTCaA5d-L4962pXBxLqzoAZ2E1MEzJv95FL-T_1UKImq8UaGpC08lhtOysXSNFAEwHZGY68OrvV4/s1600/mail.png);
}

• Save your template

• Now Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div class="header"></div>
<ul id="navigation">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About</span></a></li>
<li class="search"><a href="#"><span>Search</span></a></li>
<li class="photos"><a href="#"><span>Photos</span></a></li>
<li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li>
<li class="podcasts"><a href="#"><span>Newsletter</span></a></li>
<li class="contact"><a href="#"><span>Contact</span></a></li>
</ul>

Customization :

• Replace all # with your links and see it in action.

Form The Editor's Desk

I personally love this slide down jquery menu and i think after adding this you'll love it too. It's a good way to display your site's menu if you're using a template which doesn't suit any other menus. It's simple , cool and smooth and i think you should give it a try. This widget was developed by BWidget and i just share it with you, if you face any problem during installation of this menu please feel free to write in comment box below. Peace, Happy Blogging.