Mega Menu On-Click Feature

5 replies · opened Nov 5, 2020

SsilkysackNov 5, 2020

Hello, I have a mega menu setup with onclick functionality as seen here
mega-menu-side-tab.html

My issue is I have menu links that point to url anchors so the page does not reload when clicked, and because of that the menu does not go away after click.

I would like to add a way for the menu to hide after a menu link is clicked. Can you help with that?

SSemicolon WebSTAFFNov 5, 2020

Hello,

This will require Custom JS. Consider using the following code at the bottom of the Page after the js/functions.js JS File Linking:
[ch_pre]
( function($) {
$( '.menu-link[href*="#"]' ).on( 'click', function(e) {
e.preventDefault();
$(this).parents( '.mega-menu-content, .sub-menu-container' ).removeClass('d-block');
});
})( jQuery );
[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsilkysackNov 5, 2020

This worked for making the mega menu hide after click, but unfortunately now none of the links work.

Now any link i hit just closes the mega menu and the URL does not change at all.

SsilkysackNov 5, 2020

the url anchors that are being used are from ecwid.com

example of one of my links...

href="#!/Buddy-V-Foods/c/63286569/attribute_Category=Fondant"

With the JS code you provided the links now dont work.

SSemicolon WebSTAFFNov 6, 2020

Hello,

Oh Yes! Simply remove the e.preventDefault(); Line of Code. Try this code:
[ch_pre]
( function($) {
$( '.menu-link[href*="#"]' ).on( 'click', function() {
$(this).parents( '.mega-menu-content, .sub-menu-container' ).removeClass('d-block');
});
})( jQuery );
[/ch_pre]

This should fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsilkysackOct 11, 2023

Digging up this old thread. Im having trouble with this solution.

  1. The Hamburger Icon does not change back after selecting a link.

  2. On mobile iphone safari or chrome, after a couple links the menu will no longer scroll and only the main body behind the menu will scroll.

Is there a JavaScript code that can close the mobile off canvas menu after clicking a link that functions the same as if the hamburger icon was used to close the menu?

Thank You!

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard