Site logo

Archived topic

Slide out menu close sub menu items

4 replies · Started by Yael on January 28, 2019

Viewing posts 1–5 of 5

Hi there,

I'm experimenting with Slide Out menu on desktop and I would like to know if it's possible to:

Close sub menus when you click on another main menu with sub items.

The way it works now, they all stay open unless you close before going to next menu item

Site is password protected

User: pixelhappy PW: flywheel

sorry, wrong password:

To view site:

User: pixelhappy
PW: ride-breath

Hi there,

Not super easy, but can be done with some javascript.

If you don't already have a custom javascript file, you can:

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wp_footer, and set the Display Rules to your Entire Site.
3. Add this as the hook content:

<script>
    var parentElementLinks = document.querySelectorAll( '.slideout-navigation .menu-item-has-children > a' );
	
    for ( var i = 0; i < parentElementLinks.length; i++ ) {
        parentElementLinks[ i ].addEventListener( 'click', function() {
            var _this = this;
		
            var openedSubMenus = _this.closest( 'nav' ).querySelectorAll( 'ul.toggled-on' );
		
            if ( openedSubMenus && ! _this.closest( 'ul' ).classList.contains( 'toggled-on' ) && ! _this.closest( 'li' ).classList.contains( 'sfHover' ) ) {
                for ( var o = 0; o < openedSubMenus.length; o++ ) {
                    openedSubMenus[o].classList.remove( 'toggled-on' );
                    openedSubMenus[o].closest( 'li' ).classList.remove( 'sfHover' );
                }
            }
        }, true );
    }
</script>

Wow, that was beyond the support I expected, Tom!

I'm saving this for all future GP sites :)

Thank you.

This is likely something we should add to the plugin. I'll look into it :)

This archived topic is closed to new replies.