Clickable Dropdown Menu

In this step-by-step tutorial, you'll learn how to create a clickable dropdown menu instead of the default hover…
Learn more
How to create a clickable dropdown menu in Joomla website builder Gridbox?
In this step-by-step tutorial, you'll learn how to create a clickable dropdown menu instead of the default hover. This method is useful when you want users to open a dropdown menu by choice, not by accident, when they move the mouse over it.

With just a few lines of CSS and JavaScript code, you can change how menus behave without needing third-party plugins. Simply use the built-in Code Editor to apply your changes. This way, you can easily extend the power of the Joomla website builder Gridbox with custom code and adapt your site’s functionality exactly the way you want. It’s a great solution for anyone who wants to create a clickable dropdown menu.

This method is fully compatible with the Gridbox and won't interfere with other site elements. Follow the steps, and you'll have a click-to-open dropdown menu in just a few minutes.

Tools

Code editor

Estimated time

5 min.

Adding Class Suffix

1. The class suffix clickable-dropdown should be placed in the "Class Suffix" field of the Menu plugin.

Adding CSS

2. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

 


@media (min-width: 1025px) {
    .clickable-dropdown .nav li.deeper:hover > .mod-menu__sub:not(.dropdown-visible), 
    .clickable-dropdown .nav li:hover > .tabs-content-wrapper:not(.dropdown-visible) {
        display: none !important;
    }
    .clickable-dropdown .dropdown-visible {
        box-sizing: border-box !important;
        display: block !important;
    }
    .clickable-dropdown .mod-menu__sub > .deeper > .mod-menu__sub.dropdown-visible {
        left: 100%;
        position: absolute;
        top: 0px !important;
    }
}

Adding JavaScript

3. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

 


$(document).ready(function () {
    if (window.matchMedia("(min-width: 1025px)").matches) {
        $('.clickable-dropdown .deeper.parent > a, .clickable-dropdown .deeper.parent > span').on('click focusin', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const currentParent = $(this).closest('.deeper.parent');
            const currentSubmenu = currentParent.children('.mod-menu__sub, .ba-wrapper').first();
            currentParent
                .siblings('.deeper.parent')
                .children('.mod-menu__sub.dropdown-visible, .ba-wrapper.dropdown-visible')
                .removeClass('dropdown-visible');
            if (!currentSubmenu.hasClass('dropdown-visible')) {
                currentSubmenu.addClass('dropdown-visible');
            }
        });
        $(document).on('click focusin', function (e) {
            if ($(e.target).closest('.deeper.parent').length === 0) {
                $('.mod-menu__sub, .ba-wrapper').removeClass('dropdown-visible');
            }
        });
    }
});

Something is not clear? Ask a question on community forums.