Add jQuery .slideToggle() effect in a Drop Down Menu

Jquery is a beautiful library of JavaScript that has inflated a new life in web technology.  Websites today largely use jQuery to create gad...

jquery animationJquery is a beautiful library of JavaScript that has inflated a new life in web technology.  Websites today largely use jQuery to create gadgets and designs that were impossible in past. Unlike CSS3 and HTML5, jquery is supported by all major browsers including IE8+.  The functionality that we will learn today is called Jquery Slide Toggle effect. It enables you to control the speed elements which respond on mouse hover. If you move your mouse towards the drop down menu (at top) on this blog, you will observe that the column drops smoothly and slowly. It first slides down and then expands to its full width. We will use one simple function to introduce this animation in its simplest form. It is .slideToggle(). This animates the drop down list and produces a beautiful effect.

DEMO: Take your mouse towards the Tool tab on the top black navigation menu in this blog

slidetoggle in jquery

This jQuery animation works on both Internet Explorer and other major browsers like Firefox, safari and Chrome.

Note: For understanding this part you may please read the earlier tutorials of this series:

Navigation Menu Tutorials
4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..
5. Add Jquery Slide Toggle Effect To a Drop Down Menu
6. Surprise...

How it works?

I have made the steps extremely simple so that even beginners may love to implement this modification inside their blogs or websites. We just need to create two CSS classes and insert them inside the link list tags of the menu and then finally attach the necessary call functions to trigger the effect. Follow these simple steps for blogger:

  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for <head>
  5. just below it paste the following code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

 

Note: If you have previously added the jquery link then you remove the previous one and use this update done instead. Your old widgets will still work.

     6. Next search for ]]></b:skin>    and just above it paste the following CSS classes

.mbt_navigation {
        position:absolute;
        display:none;
    }
 
    .mbt_navigation li {
        clear:both;
    }

     7.  Now the last part. Search your menu code and to the part from where the drop down list starts, add the class dropdown1 to the main tab (li tag) and add mbt_navigation to the ul tag of the column. Please see the our code to get an idea and carefully observe the locations of the two classes. We have replaced links with # symbol for simplicity.

 

<li class='dropdown1'><a href='#'>Tools »</a>
<ul class='mbt_navigation'>
<li><a href='#'>HTML Editor</a></li>
<li><a href='#'>Multiple SITEMAP Generator</a></li>
<li><a href='#'>Encode HTML Characters</a></li>
<li><a href='#'>Count Characters</a></li>

<li><a href='#'>Meta Tag Generator</a></li>

<li><a href='#'>Color Code Generator</a></li>

      8. Finally just after the entire HTML code of your Menu (where your menu ends, it can either be </ul> or </div> depending on your menu code), paste the following code:

<script type='text/javascript'>
            // Wait for the page and all the DOM to be fully loaded
       
 
                    // Add the &#39;hover&#39; event listener to our drop down class
            $(&#39;.dropdown1&#39;).hover(function() {
                            // When the event is triggered, grab the current element &#39;this&#39; and
                            // find it&#39;s children &#39;.sub_navigation1&#39; and display/hide them
                $(this).find(&#39;.mbt_navigation&#39;).slideToggle();
            });
       
    </script>

        9.   Save your template and you are all done!

Visit your website and roll over your mouse cursor over the menu to see it sliding down smoothly without a jerk!

Need help?

The above tutorial is the easiest possible way to add the slide down animation to your menus without replacing your entire menu with a jQuery menu you may find online. This effect can be customized with a lot more functions but for the sake of simplicity we have narrowed down this guide so that you may enjoy playing with it. Do not panic if you troubleshoot yourself just let me know and I would love to reply back. Take good care of yourselves and of your loved ones. Peace and blessings pals. :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: Add jQuery .slideToggle() effect in a Drop Down Menu
Add jQuery .slideToggle() effect in a Drop Down Menu
http://lh6.ggpht.com/-5QLC5D1sfAI/T85XrgutG2I/AAAAAAAAGmI/Law2U-t71EQ/image%25255B25%25255D.png?imgmax=800
http://lh6.ggpht.com/-5QLC5D1sfAI/T85XrgutG2I/AAAAAAAAGmI/Law2U-t71EQ/s72-c/image%25255B25%25255D.png?imgmax=800
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2012/06/add-jquery-slidetoggle-effect-in-drop.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/06/add-jquery-slidetoggle-effect-in-drop.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy