{"id":312,"date":"2015-03-12T15:56:48","date_gmt":"2015-03-12T15:56:48","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=312"},"modified":"2022-09-21T11:32:01","modified_gmt":"2022-09-21T10:32:01","slug":"javascript-api","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/javascript-api\/","title":{"rendered":"JavaScript API"},"content":{"rendered":"<p>jQuery events are fired each time a flyout or mega menu is open and closed. The events are &#8220;open_panel&#8221; and &#8220;close_panel&#8221;. You can also manipulate the menu (open and close sub menus) using JavaScript.<\/p>\n<h3>Important reading: How to use these examples<\/h3>\n<p>To use these examples, install the &#8220;<a href=\"https:\/\/wordpress.org\/plugins\/tc-custom-javascript\/\">TC Custom JavaScript<\/a>&#8221; plugin, then paste one of the following options into the <em>Appearance &gt; Custom JavaScript<\/em> page.<\/p>\n<p>If you would prefer to use your own JavaScript file, <strong>you\u00a0must make sure it is output after the maxmegamenu.js file<\/strong>. You can do this by adding &#8220;megamenu&#8221; added as a dependency to &#8220;wp_enqueue_script&#8221; for your custom script.<\/p>\n<h4>Detect when any sub menu\u00a0is opened:<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('li.mega-menu-item').on('open_panel', function() {\r\n        console.log('Sub menu opened');\r\n    });\r\n});<\/pre>\n<h4>Detect when any sub menu\u00a0is closed:<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('li.mega-menu-item').on('close_panel', function() {\r\n        console.log('Sub menu closed');\r\n    });\r\n});<\/pre>\n<h4>Detect when a sub menu\u00a0for a specific menu item is opened:<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('#mega-menu-item-389').on('open_panel', function() { \r\n        console.log('Sub menu for item 389 opened');\r\n    });\r\n});<\/pre>\n<h4>Detect when a sub menu\u00a0for a specific menu item is closed:<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('#mega-menu-item-389').on('close_panel', function() {\r\n        console.log('Sub menu for item 389 closed');\r\n    });\r\n});<\/pre>\n<h4>Close all open sub menus when a link is clicked:<\/h4>\n<pre class=\"lang:default decode:true\">\/\/ close all open sub menus when element with \"close-all-panels\" class is clicked\r\njQuery(function($) {\r\n    $('.close-all-panels').on('click', function(e) {\r\n        e.preventDefault();\r\n        $('.max-mega-menu').data('maxmegamenu').hideAllPanels();\r\n    });\r\n});<\/pre>\n<h4>Close all open sub menus when the escape key is pressed:<\/h4>\n<p><strong>Important<\/strong>: you will need to update the menu selector (#mega-menu-primary) to target your own menu.<\/p>\n<pre class=\"\">jQuery(function($) {\r\n    jQuery(document).keyup(function(e) {\r\n        if (e.keyCode === 27) {\r\n            jQuery('#mega-menu-primary').data('maxmegamenu').hideAllPanels();\r\n        }\r\n    });\r\n});<\/pre>\n<h4>Close a single sub menu:<\/h4>\n<p><strong>Important<\/strong>: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.<\/p>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('a.close-a-panel').on('click', function(e) {\r\n        e.preventDefault();\r\n        var panelToHide = $(\"#mega-menu-item-1081 &gt; a.mega-menu-link\");\r\n        $('#mega-menu-top-navigation').data('maxmegamenu').hidePanel(panelToHide, true);\r\n    });\r\n});<\/pre>\n<h4>Open a single sub menu:<\/h4>\n<p><strong>Important<\/strong>: you will need to update the menu selector (#mega-menu-top-navigation) to target your own menu.<\/p>\n<pre class=\"lang:default decode:true \">jQuery(function($) {\r\n    $('a.open-a-panel').on('click', function(e) {\r\n        e.preventDefault();\r\n        var panelToShow = $(\"#mega-menu-item-1081 &gt; a.mega-menu-link\");\r\n        $('#mega-menu-top-navigation').data('maxmegamenu').showPanel(panelToShow);\r\n    });\r\n});<\/pre>\n<h4>Remove focus from menu items when a sub menu is closed:<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('li.mega-menu-item').on('close_panel', function() {\r\n        $('&gt; a.mega-menu-link:focus', $(this)).blur();\r\n    });\r\n});<\/pre>\n<h4>Remove focus from inputs when a sub menu is closed:<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(function($) {\r\n    $('li.mega-menu-item').on('close_panel', function() {\r\n        $('.mega-menu input:focus').blur();\r\n    });\r\n});<\/pre>\n<h4>Detect when mobile menu is opened<\/h4>\n<p><strong>Important<\/strong>: you will need to update the menu selector (#mega-menu-primary) to target your own menu.<\/p>\n<pre class=\"lang:default decode:true\">jQuery(document).ready(function( $ ) {\r\n\t$(\"ul#mega-menu-primary\").on(\"mmm:showMobileMenu\", function() {\r\n\t\tconsole.log(\"mobile menu opened for primary location\");\r\n\t});\r\n});<\/pre>\n<h4>Detect when mobile menu is closed<\/h4>\n<p><strong>Important<\/strong>: you will need to update the menu selector (#mega-menu-primary) to target your own menu.<\/p>\n<pre class=\"lang:default decode:true\">jQuery(document).ready(function( $ ) {\r\n\t$(\"ul#mega-menu-primary\").on(\"mmm:hideMobileMenu\", function() {\r\n\t\talert(\"mobile menu closed for primary location\");\r\n\t});\r\n});<\/pre>\n<h4>Hide all open mobile menus when another is opened:<\/h4>\n<pre class=\"lang:default decode:true \">jQuery(document).ready(function( $ ) {\r\n\t$(\"ul.max-mega-menu\").on(\"mmm:showMobileMenu\", function() {\r\n\t\tvar current_menu = $(this);\r\n\t\t$('ul.max-mega-menu').not(current_menu).each( function() {\r\n\t\t      $(this).data('maxmegamenu').hideMobileMenu();\r\n\t\t});\r\n\t});\r\n});<\/pre>\n<h4>Mobile Menu: Close any previously opened sub menus when clicking toggle bar<\/h4>\n<pre class=\"\">jQuery(document).ready(function( $ ) {\r\n    jQuery('.mega-menu-toggle').on('click', function(e) {\r\n        jQuery('.max-mega-menu').data('maxmegamenu').hideAllPanels();\r\n    });\r\n});<\/pre>\n<h4>Multiple menus: Only allow one sub menu to be open<\/h4>\n<pre class=\"lang:default decode:true\">jQuery(document).ready(function( $ ) {\r\n\t$(\"li.mega-menu-item\").on(\"open_panel\", function() {\r\n        var current_menu = $(this).closest(\"ul.max-mega-menu\");\r\n\t\t$('ul.max-mega-menu').not(current_menu).each( function() {\r\n\t\t      $(this).data('maxmegamenu').hideAllPanels();\r\n\t\t});\r\n\t});\r\n});<\/pre>\n<h4>Detect when search box is opened and closed<\/h4>\n<p><em>Requires Max Mega Menu Pro v2.2.7.1+<\/em><\/p>\n<p><strong>Important<\/strong>: you will need to update the menu selector (#mega-menu-primary) to target your own menu.<\/p>\n<pre class=\"lang:default decode:true\">jQuery(document).ready(function( $ ) {\r\n\t$(\"ul#mega-menu-primary\").on(\"mmm:openSearch\", function() {\r\n\t\t$('body').addClass(\"search-open\");\r\n\t});\r\n \t$(\"ul#mega-menu-primary\").on(\"mmm:closeSearch\", function() {\r\n\t\t$('body').removeClass(\"search-open\");\r\n\t});\r\n});<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery events are fired each time a flyout or mega menu is open and closed. The events are &#8220;open_panel&#8221; and &#8220;close_panel&#8221;. 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 &#8220;TC Custom JavaScript&#8221;&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[18],"ht-kb-tag":[],"class_list":["post-312","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-developers"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"jQuery events are fired each time a flyout or mega menu is open and closed. The events are &#8220;open_panel&#8221; and &#8220;close_panel&#8221;. 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 &#8220;TC Custom JavaScript&#8221;...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":23,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/312\/revisions"}],"predecessor-version":[{"id":356144,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/312\/revisions\/356144"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=312"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}