Open ghost opened 7 years ago
Use a media query and display none on the mega menu. Then display block on your custom menu.
What if I want to use the same menu for both mobile and desktop so doing a display none is not an option? I'm using a CMS and trying to be SEO conscious to not duplicate navigation links that would confuse Google's bots.
Are there any methods for destroying and re-initializing the megamenu js on resize? My event handlers won't function over top of the libraries.
I created a destroy function right below "setOptions" around line 825 destroy: function() { $(this.menu).off('.accessible-megamenu'); }
Initiate $("nav:first").accessibleMegaMenu(megamenu); Remove $('nav:first').data('plugin_accessibleMegaMenu').destroy(); Re-start $('nav:first').data('plugin_accessibleMegaMenu').init();
@carlafranca Hi, Can you please elaborate further on how can I use the above destroy function. I need to turn-off megamenu below certain resolution and bind different events(touch -tap/doubleTap)
Many thanks in advance.
Regards,
Mark W
@pbhar28 Hi Mark, yes sure. Here is how I use it.
Start the plugin only on specific size:
if($(window).width() >= 992 ){
$("nav:first").accessibleMegaMenu(megamenu);
}
mobileSetup:
On my implementation I remove all the "aria" on links and dropdowns added by the plugin (It will be added again once the plugin is restarted) I do it because my menu changes completely. No second level on mobile.
//Remove aria on mobile
$('.nav__item > a').removeAttr('aria-controls aria-expanded aria-haspopup');
$('.nav__menu-panel').removeAttr('role aria-expanded aria-hidden aria-labelledby');
//Destroy accessibility plugin on mobile
if($('nav:first').data('plugin_accessibleMegaMenu')) {
$('nav:first').data('plugin_accessibleMegaMenu').destroy();
}
desktopSetup:
//Check if plugin was started using data and the plugin name
if( $('nav:first').data('plugin_accessibleMegaMenu') ){
//Restart the plugin
$('nav:first').data('plugin_accessibleMegaMenu').init();
}else{
$("nav:first").accessibleMegaMenu(megamenu);
}
I need this function for responsivness, below X pixels i would like to destroy instance of mega menu, and use casual CSS Menu, or my own JS.