Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

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

Home Forums Support Only one menu open at a time in the submenu

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #557026
    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

    #557278
    Leo
    Staff
    Customer Support

    Hi there,

    Not quite sure if I understand.

    Do you have an example to show?

    Let me know πŸ™‚

    #557562
    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.

    #557594
    Leo
    Staff
    Customer Support
    #558579
    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?

    #558658
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #558662
    Nick

    Nice one Tom, Thank you! πŸ™‚

    #836837
    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

    #837138
    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( '.main-navigation .menu-item-has-children > a' );
    	
        for ( var i = 0; i < parentElementLinks.length; i++ ) {
            parentElementLinks.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 πŸ™‚

    #841634
    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.

    #841720
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #841735
    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…

    #842357
    Tom
    Lead Developer
    Lead Developer

    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.

    #842365
    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 πŸ™‚

    #847603
    Tom
    Lead Developer
    Lead Developer

    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>
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.