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:

Detect when any sub menu is closed:

Detect when a sub menu for a specific menu item is opened:

Detect when a sub menu for a specific menu item is closed:

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.

Close a single sub menu:

Important: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.

Open a single sub menu:

Important: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.

Remove focus from menu items when a sub menu is closed:

Remove focus from inputs when a sub menu is closed:

Detect when mobile menu is opened

Important: you will need to update the menu selector (#mega-menu-primary) to target your own menu.

Detect when mobile menu is closed

Important: you will need to update the menu selector (#mega-menu-primary) to target your own menu.

Hide all open mobile menus when another is opened:

Mobile Menu: Close any previously opened sub menus when clicking toggle bar

Multiple menus: Only allow one sub menu to be open

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.

 

Related Articles