What is the JS that controls submenu collapses?

[bobbybosler]

Hey there, I am decently proficient in jQuery and am trying to create some JS that will allow me to close other submenus when a new one is opened. I achieved this in X previously, but it appears that Pro handles the submenus differently than X.

That being said, how exactly are the close and open animations for the mobile submenus handled in Pro? Does it use slideToggle or some other method to animate the submenus? What triggers the toggle and how can I hook into that?

I know how to change attributes and classes pretty easily via jQuery, and I have a working version that uses slideToggle, but the animations don’t seems as smooth as Pro’s default animations.

[ruenel]

Hello There,

The Pro theme’s submenu elements is using css transparency and css transition. As soon as the submenu displays, there is a css transition that handles the smooth display.

.x-dropdown {
    visibility: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate3d(0, 5%, 0);
    transition-delay: 0s, 0s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0s;
    transition-property: opacity, transform, visibility;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 9999;
}

.x-dropdown.x-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
    pointer-events: auto;
}

As soon as you hover the menu, the JS script adds a .x-active class to the submenu so that the css will be implemented.

Hope this helps.

[bobbybosler]

Thank you, @RueNel, but I see that I wasn’t clear about my question. I am talking about the submenus in the Pro mobile menus. Specifically, the off canvas mobile nav menus.

[ruenel]

Hello There,

Instead of using slideToggle, simply trigger the click events of the other sibling that has a submenu. So if one parent menu item is clicked, it will also trigger a click event to the other siblings thus closing the others.

You might be interested in checking out this thread: https://theme.co/apex/forum/t/off-canvas-navigation-menu-closing-after-click-unless-it-s-a-sub-menu-heading/22764

Hope this helps.

[bobbybosler]

@RueNel, that helped a TON! Thank you so much!

For those who might be looking for how to close other mobile sub-menus when a new one is opened on the mobile nav menu, this JS should do the trick. Works beautifully!

jQuery(document).ready(function($){
$('.x-off-canvas .menu-item-has-children .x-anchor').each(function(){
    $(this).on("click", function(event) {
        if ($(event.target).attr('class') != "x-active") {
            $(this).parent('.menu-item-has-children').siblings('.menu-item-has-children').find('.x-active').trigger('click');
            }
        });
    });
});

[mldarshana]

@bobbybosler … Thanks for sharing it with other members