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.
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 the examples below in your own JavaScript file, you must make sure it is output after the maxmegamenu.js file. Make sure “megamenu” is added as a dependency to “wp_enqueue_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(); }); }); |