[Resolved] Slide out menu close sub menu items

Home Forums Support [Resolved] Slide out menu close sub menu items

Home Forums Support Slide out menu close sub menu items

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #795130
    Yael

    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

    #795135
    Yael

    sorry, wrong password:

    To view site:

    User: pixelhappy
    PW: ride-breath

    #795721
    Tom
    Lead Developer
    Lead Developer

    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>
    #795769
    Yael

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

    I’m saving this for all future GP sites ๐Ÿ™‚

    Thank you.

    #796032
    Tom
    Lead Developer
    Lead Developer

    This is likely something we should add to the plugin. I’ll look into it ๐Ÿ™‚

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.