JavaScript API
jQuery events are fired each time a flyout or mega menu is open and closed. The events are “open_panel” and “close_panel”. You can also manipulate the menu (open and close sub menus) using JavaScript.
Important reading: How to use these examples
To use these examples, install the “TC Custom JavaScript” plugin, then paste one of the following options into the Appearance > Custom JavaScript page.
If you would prefer to use your own JavaScript file, you must make sure it is output after the maxmegamenu.js file. You can do this by adding “megamenu” added as a dependency to “wp_enqueue_script” for your custom script.
Detect when any sub menu is opened:
|
1 2 3 4 5 |
jQuery(function($) { $('li.mega-menu-item').on('open_panel', function() { console.log('Sub menu opened'); }); }); |
Detect when any sub menu is closed:
|
1 2 3 4 5 |
jQuery(function($) { $('li.mega-menu-item').on('close_panel', function() { console.log('Sub menu closed'); }); }); |
Detect when a sub menu for a specific menu item is opened:
|
1 2 3 4 5 |
jQuery(function($) { $('#mega-menu-item-389').on('open_panel', function() { console.log('Sub menu for item 389 opened'); }); }); |
Detect when a sub menu for a specific menu item is closed:
|
1 2 3 4 5 |
jQuery(function($) { $('#mega-menu-item-389').on('close_panel', function() { console.log('Sub menu for item 389 closed'); }); }); |
Close all open sub menus:
Important: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.
|
1 2 3 4 5 6 |
jQuery(function($) { $('a.close-all-panels').on('click', function(e) { e.preventDefault(); $('#mega-menu-top-navigation').data('maxmegamenu').hideAllPanels(); }); }); |
Close a single sub menu:
Important: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.
|
1 2 3 4 5 6 7 |
jQuery(function($) { $('a.close-a-panel').on('click', function(e) { e.preventDefault(); var panelToHide = $("#mega-menu-item-1081 > a.mega-menu-link"); $('#mega-menu-top-navigation').data('maxmegamenu').hidePanel(panelToHide, true); }); }); |
Open a single sub menu:
Important: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.
|
1 2 3 4 5 6 7 |
jQuery(function($) { $('a.open-a-panel').on('click', function(e) { e.preventDefault(); var panelToShow = $("#mega-menu-item-1081 > a.mega-menu-link"); $('#mega-menu-top-navigation').data('maxmegamenu').showPanel(panelToShow); }); }); |
Remove focus from menu items when a sub menu is closed:
|
1 2 3 4 5 |
jQuery(function($) { $('li.mega-menu-item').on('close_panel', function() { $('> a.mega-menu-link:focus', $(this)).blur(); }); }); |
Remove focus from inputs when a sub menu is closed:
|
1 2 3 4 5 |
jQuery(function($) { $('li.mega-menu-item').on('close_panel', function() { $('.mega-menu input:focus').blur(); }); }); |
Detect when mobile menu is opened
Important: you will need to update the menu selector (#mega-menu-primary) to target your own menu.
|
1 2 3 4 5 |
jQuery(document).ready(function( $ ) { $("ul#mega-menu-primary").on("mmm:showMobileMenu", function() { console.log("mobile menu opened for primary location"); }); }); |
Detect when mobile menu is closed
Important: you will need to update the menu selector (#mega-menu-primary) to target your own menu.
|
1 2 3 4 5 |
jQuery(document).ready(function( $ ) { $("ul#mega-menu-primary").on("mmm:hideMobileMenu", function() { alert("mobile menu closed for primary location"); }); }); |
Hide all open mobile menus when another is opened:
(requires Max Mega Menu 2.9+)
|
1 2 3 4 5 6 7 8 |
jQuery(document).ready(function( $ ) { $("ul.max-mega-menu").on("mmm:showMobileMenu", function() { var current_menu = $(this); $('ul.max-mega-menu').not(current_menu).each( function() { $(this).data('maxmegamenu').hideMobileMenu(); }); }); }); |