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 when a link is clicked:
|
1 2 3 4 5 6 7 |
// close all open sub menus when element with "close-all-panels" class is clicked jQuery(function($) { $('.close-all-panels').on('click', function(e) { e.preventDefault(); $('.max-mega-menu').data('maxmegamenu').hideAllPanels(); }); }); |
Close all open sub menus when the escape key is pressed:
Important: you will need to update the menu selector (#mega-menu-primary) to target your own menu.
|
1 2 3 4 5 6 7 |
jQuery(function($) { jQuery(document).keyup(function(e) { if (e.keyCode === 27) { jQuery('#mega-menu-primary').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:
|
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(); }); }); }); |
Mobile Menu: Close any previously opened sub menus when clicking toggle bar
|
1 2 3 4 5 |
jQuery(document).ready(function( $ ) { jQuery('.mega-menu-toggle').on('click', function(e) { jQuery('.max-mega-menu').data('maxmegamenu').hideAllPanels(); }); }); |
Multiple menus: Only allow one sub menu to be open
|
1 2 3 4 5 6 7 8 |
jQuery(document).ready(function( $ ) { $("li.mega-menu-item").on("open_panel", function() { var current_menu = $(this).closest("ul.max-mega-menu"); $('ul.max-mega-menu').not(current_menu).each( function() { $(this).data('maxmegamenu').hideAllPanels(); }); }); }); |
Detect when search box is opened and closed
Requires Max Mega Menu Pro v2.2.7.1+
Important: you will need to update the menu selector (#mega-menu-primary) to target your own menu.
|
1 2 3 4 5 6 7 8 |
jQuery(document).ready(function( $ ) { $("ul#mega-menu-primary").on("mmm:openSearch", function() { $('body').addClass("search-open"); }); $("ul#mega-menu-primary").on("mmm:closeSearch", function() { $('body').removeClass("search-open"); }); }); |