Archived topic
Only open one submenu at a time (sider template)
19 replies · Started by CorpCredible on July 11, 2022
I am using the "sider" template with a click menu. I have lots of sub-items in the side bar and am looking for a solution for instances where the user opens several at once. The default is that there is a scroll bar, which we don't want. The best option would be if I could get the subitems to behave like the top-level nav items, and only allow one at a time to be opened. I found a support thread on that topic however it appears to target hover menus, not click menus. The solution was to add an element hook with this code:
<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>
If there is a solution utilizing a hook for click menus then that would be perfect. I am also open to other solutions, such as having the menu create a longer page when expanded, or scroll independently of the body without a scroll bar. Basically, I am happy with any solution that doesn't leave the menu cut off.
Hi Tom,
To have a better understanding of what you’re trying to do, do you have a reference site with such a menu or do you have a sketch you can show us how it should appear?
Hope to hear from you soon.
Hi Fernando - I don't have a way to show the site at the moment, but I can post a screenshot.
Here’s an article with regards to uploading screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots
Here is a screenshot. https://www.corpcredible.com/wp-content/uploads/2022/07/Screenshot-2022-07-12-105333.jpg
That’s the default behavior of the Sider template’s sub menu items. It should only open on arrow click by default.
Example: https://share.getcloudapp.com/GGuK7gWQ
How is the sub-menu behaving from your website?
Kindly let us know. If you’re referring to something else, let us know as well.
I only want one sub-menu to be expanded at a time, like the top level navigation items. I don't want them to be able to all be opened at once. They open on arrow click just fine. Please read my original request.
I see. Sorry for the misunderstanding.
Can you try this script?:
<script>
var parentElementLinks = document.querySelectorAll('.main-navigation .menu-item-has-children > a > .dropdown-menu-toggle');
for (var i = 0; i < parentElementLinks.length; i++) {
parentElementLinks[i].addEventListener('click', function() {
var _this = this;
var openedSubMenus = _this.closest('ul').querySelectorAll('ul.toggled-on');
if (openedSubMenus) {
for (var o = 0; o < openedSubMenus.length; o++) {
openedSubMenus[o].classList.remove('toggled-on');
openedSubMenus[o].closest('li').classList.remove('sfHover');
}
}
}, true);
}
</script>You may add this through a Hook Element hooked to wp_footer.
Let us know how it goes.
I added that but it doesn't seem to do anything. I'm using the click menu just to specify. I think the solutions I've seen are for the hover option. I will put some credentials in the box so you can look further.
I see. I edited the code above. Can you update the code?
Tested it on my site as well to be sure, and it’s working as expected.
Kindly let us know how it goes.
I added the code but it is still allowing me to open all the sub navigation menus at once. Can you look at the site and let me know if I am doing anything wrong in the setup?
Hi there,
Tom provides a script here that was for a suer with a similar use case - can you give that a try ?
Hi David thanks for taking a look - that did not work either and I think the issue stems from my using the click menu, not the hover menu. I see "sfhover" in the script so I'm just guessing that is "superfish hover". Is there a similar script that targets the click menu? I put some creds in the private area if you want to look.
Have you tried both codes with the hook set to wp_footer? Looking at the hook element, it’s currently hooked to wp_head.
Kindly let us know.
Neither the footer or the header script works for me. Thinking maybe I should just replace it with an accordion plugin- but I'd rather keep it native to GP.
