Simple Awesome Drop Down Navigation with JQUERY For Blogger

Your Blog needs to look awesome and here is an awesome drop down navigation with Jquery for your blogger. Drop down navigation turns the look of your blogger menu into professional way. So with drop down navigation you can simply add more menu items then every before which really is professional look for you blog.

Implement Awesome Drop Down Navigation with JQUERY

So here is a simple awesome drop down navigation menu, it will show sub category when you will place the mouse on any of the top menu item. It also has a focus or click effect.

Now follow some simple steps given bellow:

• Go to Blogger => Layout => Add a Gadget ( in the header Area)
• Choose “HTML/JavaScript”
• Paste the given code in the content box

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
  $(function() {
    //We initially hide the all dropdown menus
    $('#dropdown_nav li').find('.sub_nav').hide();

    //When hovering over the main nav link we find the dropdown menu to the corresponding link.
    $('#dropdown_nav li').hover(function() {
      //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
      $(this).find('.sub_nav').fadeIn(100);
    }
                                , function() {
                                  //Do the same again, only fadeOut this time.
                                  $(this).find('.sub_nav').fadeOut(50);
                                }
                               );
  }
   );
</script>
<style>
  #dropdown_nav a {
 font-family:Arial, Sans-Serif;
        font-size:15px;
        font-weight:bold;
        color:#525252;
        text-decoration:none;
      }
      #dropdown_nav {
        width:960px;
        padding:0px;
        display:inline-block;
        list-style:none;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border:1px solid #ccc;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        background:#e2e2e2;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
 
      #dropdown_nav li {
  padding:10px 0px 10px 0px;
  float:left;
  position:relative;
  display:inline-block;
      }
 
      #dropdown_nav li a {
        padding:10px 15px 10px 15px;
        text-shadow:-1px 1px 0px #f6f6f6;
        -moz-box-shadow:inset 0px 0px 1px #fff;
        -webkit-box-shadow:inset 0px 0px 1px #fff;
        border-right:1px solid #ccc;
      }
      #dropdown_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
 
      #dropdown_nav li a.first {
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-radius:5px 0px 0px 5px;
      }
      /*#dropdown_nav li a.last {
      -moz-border-radius:0px 5px 5px 0px;
      -webkit-border-radius:0px 5px 5px 0px;
    }
      */
 
      /* Sub-Nav styling */
      #dropdown_nav .sub_nav {
        width:160px;
        padding:0px;
        position:absolute;
        top:38px;
        left:0px;
        border:1px solid #ccc;
        background:#e2e2e2;
      }
 
      #dropdown_nav .sub_nav li {
        width:160px;
        padding:0px;
      }
 
      #dropdown_nav .sub_nav li a {
        display:block;
        border-bottom:1px solid #ccc;
        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
      }
      #dropdown_nav .sub_nav li a:hover {
        background:#f9f9f9;
        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
      }
      #dropdown_nav .sub_nav li a:active {
        background:#e2e2e2;
        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
      }
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
  <li><a class="first" href="http://www.askdanyal.com/">Home</a></li>
  <li><a href="#">Tutorials</a>
   <ul class="sub_nav">
    <li><a href="#"> #1</a></li>
    <li><a href="#"> #2</a></li>
    <li><a href="#"> #3</a></li>
    <li><a href="#">#4</a></li>
    <li><a href="#"> #5</a></li>
    <li><a href="#">#6</a></li>
    <li><a href="#">#7</a></li>
   </ul>
  </li>
  <li><a href="#">Artciles</a>
   <ul class="sub_nav">
    <li><a href="#">Announcements #1</a></li>
    <li><a href="#">Announcements #2</a></li>
    <li><a href="#">Announcements #3</a></li>
    <li><a href="#">Announcements #4</a></li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
  </li>
  <li><a class="last" href="#">Other Stuff</a>
   <ul class="sub_nav">
    <li><a href="#">Other Stuff #1</a></li>
    <li><a href="#">Other Stuff #2</a></li>
    <li><a href="#">Other Stuff #3</a></li>
    <li><a href="#">Other Stuff #4</a></li>
   </ul>
  </li>
 </ul>

•  Replace RED Highlighted Characters With Links
•  Replace BLUE Highlighted Characters With Link Text
•  Replace the ORANGE # with main catogry link and ORANGE TEXT with main catogry name
•  Click "Save" Button

So you are done and you can see the effect into your blog.