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

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.

<link rel="stylesheet" type="text/css" href="http://bsresearcher.blogspot.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.bsresearcher.blogspot.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.

Pin it

Animated CSS3 Multi Drop Down Menu For Blogger

4/ 5

By Editorial Board

Posted By Editorial Team On May 19, 2012 Comment

Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!