Archived topic
Slide out menu close sub menu items
4 replies · Started by Yael on January 28, 2019
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 :)