[tim1mw]

If I create a menu item with no page attached, by making a custom link with no target and then attach a sub menu to that link, the behaviour of the link is inconsistent between the desktop mode and mobile mode. In desktop mode hovering over the entire link, including the arrow will open the sub menu. In mobile mode, tapping on the text of the link simply closes the menu again, only using the arrow on the right will actually expand the sub menu. This is causing user confusion.

Is there any way to persuade septera to expand the submenu of a link with no target regardless of whether the text or arrow is clicked? I’m trying to work out a javascript hack to get around this, I can get an event trigger from the link, but haven’t managed to prevent the default action yet.

I would report this as a bug, but from comments I’ve seen elsewhere this is considered to be a feature, aka only the arrows expand the menu in mobile mode. This could also be a feature request for the behaviour to be changed to something less counter-intuitive when there is no link target.

[tim1mw]

Well I have a partial fix for my problem, putting the following into a custom.js file loaded in my site header will prevent a specific menu item from closing the menu when tapped. You do need to hunt out the menu id from the page source, but that will rarely change so I can live with that if necessary:

var menu_1 = document.getElementById(“menu-item-964”);
if (menu_1 != null) {
menu_1.addEventListener(“click”, function(evt) {evt.stopImmediatePropagation();});
}

Digging into the septera code, the following in resources/js/frontend.js , function septera_initnav :

/* Close mobile menu on click/tap */
jQuery(‘body’).on(‘click’,’#mobile-nav a’, function() {
jQuery(‘#nav-cancel i’).trigger(‘click’);
});

Seems to be responsible for the event that closes the menu, disabling this kills menu closing altogether. I’m guessing that changing the logic here might enable this trigger to either close the menu in the event that a link with a target is clicked or open the submenu. Any advice on how to trigger the display of a submenu would be much appreciated!

[tim1mw]

I think I’ve answered my own question, replacing the code from frontend.js in my earlier post with the following achieves the behaviour I’m looking for:

/* Close mobile menu on click/tap */
jQuery(‘body’).on(‘click’,’#mobile-nav a’, function(evt) {
var anchor = jQuery(evt.target).parent();
if (typeof anchor.attr(“href”) == “undefined” || anchor.attr(“href”) == “#”) {
var li = anchor.parent();
var buttons = li.children(“button”);
buttons.click();
} else {
jQuery(‘#nav-cancel i’).trigger(‘click’);
}
});

In my opinion this is far less confusing for the use that simply closing the mobile menu if a submenu link that doesn’t have it’s own target is clicked. Any chance of this patch being integrated back into the official version?

[Author]

Posts