Animated CSS3 Multi Drop Down Menu For Blogger

Features Of CSS3 Drop Down Menu:

It is one of the greatest CSS3 Drop down menu as it has heaps of handsome new features which make it unique from all menus. Let us look at few of its features.

• Easy to use, Optimized with CSS3
• Speedy, No compromise in blog speed
• Stunning Multi Drop Down Menu
• Optimized with stunning Animated JQuery Jumping drop down effect
• Supports PC, Mobile phones and iPad
• Editing coding as easy as ABC

How To Add Animated CSS3 Drop Down Menu In Blogger:

To add this widget in Blogger simply Follow these steps

• Step# 1: First Go to Blogger.com >> Your Blog 
• Step# 2 Now Select Layout >> Add a Gadget (the place where you want to insert your drop down menu).
• Step# 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://www.mybloggerlab.com">MyBloggerLab</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>

Customization:

• To insert URL according to your choice replace URL-Here
• Don't forgot to include http://www. before every URL
• 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  Home and ETC.

---

Step# 4: After customizing your widget just save your template by pressing Save Button. 

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