How to Create an Interactive Dropdown Menu Using jQuery Click Events

When you build a website, making a good menu is very important. You want a menu that opens and closes smoothly when you click it. A popular choice is a dropdown menu. When you click on a main link, its hidden list drops down. At the same time, any other open list hides itself automatically.

In this easy guide, we will learn how to use jQuery to make this click action happen. We will look at how to hide lists, how to stop code mistakes with event.stopPropagation(), and how to change menu styles using .siblings().

The jQuery Code

Here is the short jQuery code to make your menu work. This code hides your lists at first, opens them smoothly when you click, and changes the styles perfectly.

jQuery(document).ready(function() {
    // 1. Hide all sub-menus on page load
    jQuery('.menu-list li .menu-drop').hide();

    // 2. Handle the click event on menu items
    jQuery('.menu-list li').click(function(event) {
        // Prevent the click event from bubbling up to parent elements
        event.stopPropagation();

        // Toggle the immediate child sub-menu with a 300ms smooth animation
        jQuery('> .menu-drop', this).toggle('300');

        // Add the active class to the clicked item and remove it from neighboring items
        jQuery(this).addClass("show_submenu").siblings().removeClass('show_submenu');
    });
});

How It Works: Step-by-Step

Let us look at each part of the code step-by-step so you can easily understand it:

1. Hiding the Lists at the Start

jQuery('.menu-list li .menu-drop').hide();

When your website page opens, this line finds all the hidden lists (.menu-drop) inside your menu. It hides them right away. This makes sure your menu looks neat and closed when someone first visits your site.

2. Stopping the Click from Spreading

event.stopPropagation();

This line stops your click from spreading to other parts of your website code. This is very important. It ensures that when you click one menu item, only that specific item moves, and nothing else gets confused.

3. Smoothly Opening and Closing

jQuery('> .menu-drop', this).toggle('300');

This line looks for the exact list belonging to the item you just clicked. The .toggle('300') tool opens it smoothly in 300 milliseconds. If the list is already open, it closes it smoothly for you.

4. Changing Styles with .siblings()

jQuery(this).addClass("show_submenu").siblings().removeClass('show_submenu');

This is how we change the look of the menu when you click it:

• addClass("show_submenu"): This lights up or marks the menu item you just clicked.
• .siblings(): This instantly looks at all the other menu items next to it.
• removeClass('show_submenu'): This takes away the mark from those other items. This makes sure only one menu item looks active at a time.

Simple HTML Example

To make this jQuery code work perfectly, your HTML structure should look like this:

<ul class="menu-list">
    <li>
        <a href="#">Services</a>
        <ul class="menu-drop">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">SEO Marketing</a></li>
        </ul>
    </li>
    <li>
        <a href="#">About Us</a>
        <ul class="menu-drop">
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Careers</a></li>
        </ul>
    </li>
</ul>

If you build your menu this way, your website navigation will stay fast, simple, and very easy to use!