Animated CSS3 Multi Drop Down Menu For Blogger

                  Beauty is the key component of a blog this is the reason why most of blogger always wishes to make their blog as eye-catching as possible. To craft their blog looks more astonishing they take help of different widgets resembling Featured Posts, Image Gallery and etc. If we go deeper, we will come across this conclusion that usually majority of Blogger pays no concentration to their CSS Drop Down Menus. Therefore, their blog not only remains short of ideal appearance but also fails in providing user-friendly experience to visitors. So today we will insert Animated CSS Drop Down Menu in blogger. This astonishing Drop down menu is created by Catalin Rosu with spectacular JQuery effects! We will be sharing a customized version which works flawlessly with blogger. It purely represents true supremacy of CSS3 with the combination of JQuery. This widget will make your Blogger Blogspot blog outlook more fashionable and attractive. So instead of waiting lets startworking!!!

To add this widget in Blogger simply Follow these steps:

1.) First Go to Blogger.com >> Your Blog 

2.) Now Select Layout >> Add a Gadget (the place where you want to insert your drop down menu).

3.) Then Click on HTML/JavaScript >> and then just Paste the following code.

<!--MBL Animated CSS3 Multi Drop Down Menu For Blogger-->
<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>          


<nav id="mbl-menu-wrap">    

 <ul id="mbl-menu">

  <li><a href="URL-Here">Home</a></li>



  <li>

   <a href="URL-Here">Categories</a>

   <ul>

    <li>
      <a href="URL-Here">CSS</a>
     <ul>
      <li><a href="URL-Here">Item 11</a></li>

      <li><a href="URL-Here">Item 12</a></li>
      <li><a href="URL-Here">Item 13</a></li>
      <li><a href="URL-Here">Item 14</a></li>
     </ul>    
    </li>
    <li>
     <a href="URL-Here">Graphic design</a>

     <ul>
      <li><a href="URL-Here">Item 21</a></li>
      <li><a href="URL-Here">Item 22</a></li>
      <li><a href="URL-Here">Item 23</a></li>
      <li><a href="URL-Here">Item 24</a></li>
     </ul>    
    </li>

    <li>
     <a href="URL-Here">Development tools</a>
     <ul>
      <li><a href="URL-Here">Item 31</a></li>
      <li><a href="URL-Here">Item 32</a></li>
      <li><a href="URL-Here">Item 33</a></li>
      <li><a href="URL-Here">Item 34</a></li>

     </ul>    
    </li>
    <li>
     <a href="URL-Here">Web design</a>    
     <ul>
      <li><a href="URL-Here">Item 41</a></li>
      <li><a href="URL-Here">Item 42</a></li>
      <li><a href="URL-Here">Item 43</a></li>

      <li><a href="URL-Here">Item 44</a></li>
     </ul> 
    </li>
   </ul>
  </li>
  <li>
   <a href="URL-Here">Work</a> 
<ul> 
<li><a href="URL-Here">Work1</a></li> 
<li><a href="URL-Here">Work2</a></li> 
<li><a href="URL-Here">Work3</a></li> 
<li><a href="URL-Here">Work4</a></li> 
            </ul> 
            </li> 
<li><a href="URL-Here">About</a></li>
<li><a href="URL-Here">Contact</a></li>                                                                                                                               <li><a href="http://toolsforblogger.blogspot.com">Blogger</a>                                                    </li> </ul>
                                                                                                                                           </nav>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
  $('li').has('ul').mouseover(function(){
   $(this).children('ul').css('visibility','visible');
   }).mouseout(function(){
   $(this).children('ul').css('visibility','hidden');
   })
  }

  /* Mobile */
  $('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');  
  $("#mbl-menu-trigger").on("click", function(){
   $("#menu").slideToggle();
  });

  // iPad
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  if (isiPad) $('#mbl-menu ul').addClass('no-transition');      
    });   
       
</script>

Important:

1.) insert URL according to your choice replace URL-Here

2.) Don't forgot to include http://www. before every URL

3.) Customizating this widget is very simply but still to make it more easier we have highlighted those elements which need to be changed  (i.e.) URL-Here  and Home , Etc.

          After customizing your widget just save your template by pressing Save Button. 

         Now go and check your blog you will witness a picture perfect Animated CSS Drop down menu