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

jquery animation Jquery 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

1. How To Create a Drop Down Menu?

2. Convert any Horizontal Menu into a Drop Down Menu

3. Add CSS3 Transitions To a Drop Down Menu

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:

Go to Blogger > Template
Backup your template
Click Edit HTML
Search for <head>
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 'hover' event listener to our drop down class
            $('.dropdown1').hover(function() {
                            // When the event is triggered, grab the current element 'this' and
                            // find it's children '.sub_navigation1' and display/hide them
                $(this).find('.mbt_navigation').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. :)

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 6/06/2012 CSS and HTMLTricks , drop down menu , Web Designing

My Blogger Tricks

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

How it works?

Need help?

12 comments