[Resolved] Menu Plus – Open submenu when tapping parent element

[Eliza]

Hello lovely humans,

I wonder if anyone have any idea how to open submenu on “click/tap” of parent element. We usually use the first link from a submenu as a parent holder, so that when on desktop on click it would jump to a subpage, and not some weird #.

So what I wanted to do was to add this little thing in my JS:

jQuery('.menu-item-has-children > a').on('click',function(e){
    e.preventDefault();
    jQuery(this).children('.dropdown-menu-toggle').trigger('click');
});

But unfortunately it doesn’t work, because of the closeElements click event generateOffside.close();. I can’t deregister it as addEventListener is an anonymous function.

To sum up. I don’t want to use # as a placeholder for a dropdown menu, but I would like it to act as a toggle on mobile, but I can’t because currently there is a “close offside” event glued to that ;o) Any ideas?

[David]

Hi there,

as you are using the slide out navigation, you could just set a different menu for the slideout. Would that be a simpler solution?

[Eliza]

Hi David!

That’s actually clever idea, but it adds some manual work to create and maintain 2 * [language_count] menus. I’m all about making work easier so even if that’s a great idea for a quick fix, it’s against my beliefs as a long term solution ;o)

If there are no other solutions, I will have to look into menu walker to use your idea, but without adding additional manual work for a client. Besides, I’m 100% sure that after few months, client won’t remember that new page must be added in multiple menus and will be blind for any messages left in WP.

Unless there is a chance to make this function not anonymous so I could unhook this event or some any other filter that I could use.

[Tom]

Any reason why you don’t want to use # as the parent item URL? That’s by far the easiest solution, as it’s built right into GP.

[Eliza]

Hi Tom, thanks for stopping by. It’s because that’s a behavior some users expect. I did used # in some distant past, but I’ve noticed that lots of people intuitively clicks parent link. So I’ve made some research then and conclude that it doesn’t hurt to make parent element clickable.

Can’t find quickly some hard data. I remember seeing stuff like that in hotjar and also found this now while googling https://www.sitepoint.com/community/t/drop-down-menu-parent-link-active-or-null/42897 (I mean, I know it’s from 2014, but still ;o))

I saw in JS when looking for a reason why my “fix” doesn’t work that # will work, but if I could, I would love to avoid it and use parent link to first item in submenu. It just works well for us.

[Tom]

Not sure I’m 100% understanding – we’ll get there 🙂

So, you have a parent menu item. Right now, the user needs to tap the arrow next to it to reveal the sub-menu.

If they tap the actual parent menu item, it goes to the URL attached to that menu item.

Instead of that, you want the user to be able to tap the entire parent menu item?

Or did I get lost somewhere?

Let me know 🙂

[Eliza]

If they tap the actual parent menu item, it goes to the URL attached to that menu item.

I want to reveal the sub menu instead of jump to URL. I’m using the same menu for desktop and slideout menu, and for slideout (only) I want trigger – reveal submenu – instead of – go to this link. Just like in this little snippet:

jQuery('#generate-slideout-menu .menu-item-has-children > a').on('click',function(e){
    e.preventDefault();
    jQuery(this).children('.dropdown-menu-toggle').trigger('click');
});

But currently this won’t work, as there is already click event attached to those links, that closes the menu which I can’t remove, because it’s an anonymous function. I’m referring to this function in offside.js

/**
 * Closes the slideout navigation if the link does something.
 * eg. Goes to an anchor link
 *
 * @since 1.7
 */
var slideoutLinks = document.querySelectorAll( '.slideout-navigation ul a' );
for ( var i = 0; i < slideoutLinks.length; i++ ) {
	slideoutLinks[i].addEventListener( 'click', function( e ) {
		var url = this.getAttribute( 'href' );

		if ( '#' !== url && '' !== url && ! navigator.userAgent.match( /iemobile/i ) ) {
			setTimeout( function() {
				generateOffside.close();
			}, 200 );
		}
	} );
};

[Tom]

Ah, I understand. So you want it to behave differently whether it’s the regular menu vs the slideout menu.

Hmm, I’m not sure there’s a way around this currently without creating two separate menus. We could make it so that’s a named function in GPP 1.8. That way the eventlistener could be removed.

[Eliza]

Correct. Slideout menu will be used for small devices (probably touch) and thus it’s more intuitive for whole link to open a sub menu, but I don’t want to create separate menu with #. It is harder to maintain multiple menus.

If it’s possible to make that named function in some near future that would be awesome! The only other option I see now, is custom menu walker to strip url for parent item and replace it with #, but removing that event would be just simpler.

[Tom]

I’m sure that’s possible – I’ll update this topic once we implement a solution 🙂

[Eliza]

<3 thank you

[Tom]

Implemented in GPP 1.8.

Here’s the code if you want to make the change now:

/**
 * Closes the slideout navigation if the link does something.
 * eg. Goes to an anchor link
 *
 * @since 1.7
 */
var slideoutLinks = document.querySelectorAll( '.slideout-navigation ul a' );

var closeOffsideOnAction = function() {
	var url = this.getAttribute( 'href' );

	if ( '#' !== url && '' !== url && ! navigator.userAgent.match( /iemobile/i ) ) {
		setTimeout( function() {
			generateOffside.close();
		}, 200 );
	}
};

for ( var i = 0; i < slideoutLinks.length; i++ ) {
	slideoutLinks[i].addEventListener( 'click', closeOffsideOnAction, false );
};

[Eliza]

Very good news! thanks Tom! :o)

[Tom]

You’re welcome 🙂

[Author]

Posts