[Resolved] Only one menu open at a time in the submenu

[Nick]

Hi,
Is there an easy way to make the submenu only ever have one of its drop downs open at a time?
I’m thinking of some javascript to remove any .toggled-on class that is present on any elements in an onclick event for a submenu element that has children.
Thank you

[Leo]

Hi there,

Not quite sure if I understand.

Do you have an example to show?

Let me know 🙂

[Nick]

Here you go: http://jsfiddle.net/rsewsg4t/2/
Notice how when a menu item is clicked when another menu item is open, the first open menu item closes and the clicked one expands.

[Leo]

Isn’t that same as the click option?
https://docs.generatepress.com/article/navigation-dropdown/#click-%E2%80%93-menu-item

Or I’m missing something?

[Nick]

No, not on the example I have, which I linked when I started this thread for only admins to see.
The other expanded menu’s don’t close when a new one is opened. They stay open.
Should this not be happening normally with a Generatepress theme?

[Tom]

Ah, the top level items close when another opens, but not the sub-menus. I’ll get that added into the theme ASAP.

I’ll update you when I have something working 🙂

[Nick]

Nice one Tom, Thank you! 🙂

[Bob]

Hi GP peeps,

Just came across this and it could come in very useful.

Was a fix ever found or something implemented for the above please? If not is there a workaround or one coming in the next version possibly?

Thanks and regards,

Bob

[Tom]

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( '.main-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>

Let me know 🙂

[Ben]

I’m having the exact same problem with my site. I want to use ‘click’ menus rather than ‘hover’ menus. I have quite a number of sub-menus and the whole thing can become a real mess unless you remember to ‘unclick’ each menu to close it before opening the next one.
I’ve tried Tom’s suggestion above, setting a wp_footer hook element and applying the display rules to the entire site, but it didn’t make any difference for me.
I’d really welcome any further suggestions on how to make the sub-menus behave properly.

[Tom]

Hi there,

The click menu items should do this by default. Any chance you can link me to your site?

[Ben]

The main menu items close automatically when a different main menu item is clicked. But no sub-menus close automatically. If a main menu item has five sub-menus on it, it’s possible to click open a sub-menu, then another sub-menu, etc until you have all five of your sub-menus open at once. It’s the same problem that Nick described in this thread on April 23 last year.
Is it possible to send you a private message with a link to the site? It’s not currently public, so I’d need to give you a login too…

[Tom]

I just played with this a bit, and unfortunately, it’s quite complex to target opened sub-menus that aren’t a part of the item you just clicked. I’ll play with it some more, but I’m not sure if there’s an easy solution.

[Ben]

Thank you very much Tom!

My menu has 9 sub-menus, some of them are nested within other sub-menus. Using the ‘hover’ menu it works fine, but the Sub-menu item only links to ‘#’, so it seems more user-friendly to me to use clicks instead of hover in this case. At the moment though, with it being possible to have all those sub-menus open at the same time, it soon becomes confusing for the visitor!

I appreciate the time you’re taking to look into this 🙂

[Tom]

Just played with this a bit. Since you’re already using jQuery on the site, try this as your JS:

<script>
    jQuery( document ).ready( function( $ ) {
        $( '.main-navigation .main-nav > ul > li > .sub-menu > li.menu-item-has-children > a' ).on( 'click', function() {
            var _this = $( this ),
                thisLi = _this.closest( 'li' ),
                thisSubMenu = thisLi.children( '.sub-menu' );
				
            $( '.sub-menu li.sfHover ').not( thisLi ).removeClass( 'sfHover' );
            $( '.main-nav > ul > li > .sub-menu .sub-menu.toggled-on').not( thisSubMenu ).removeClass( 'toggled-on' );
        } );
    } );
</script>

[Author]

Posts