Animated CSS3 Multi Drop Down Menu For Blogger

Socialize It →

Tweet

157

Advertisements

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!!!

I am certain you will adore previewing this CSS3 Menus, so first let us look at its live demo.

MBL Animated CSS3 Multi Drop Down Menu (DEMO)

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

Remember: For WordPress

If you are thinking to use this CSS3 Drop Down Menu widget on WordPress then you can do it without facing any trouble. All you need to do is to follow the same steps.

From The Editors Desk:

I expect you all would love this widget, and I assure you this CSS3 Menus will never let you down. Still it is the opening we will share more superior optimized CSS menus with enhanced styling and colors, as our main aim is to provide quality widgets. The tutorial is very simply but still if you face any difficulty regarding anything feels free to ask till then Peace Blessings and Happy Optimizing. 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).