How can I destroy instance of the menu ?

[ghost]

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.

[LaurenceRLewis]

Use a media query and display none on the mega menu. Then display block on your custom menu.

[pkavanaghjr]

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.

[carlafranca]

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();

[pbhar28]

@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

[carlafranca]

@pbhar28 Hi Mark, yes sure. Here is how I use it.

1. On load:

Start the plugin only on specific size:

if($(window).width() >= 992 ){
       $("nav:first").accessibleMegaMenu(megamenu);
}

2. On window resize I call one of the functions below depending on the browser size:

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);
}