{"id":16716,"date":"2016-05-09T12:59:07","date_gmt":"2016-05-09T11:59:07","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/pro-features\/vertical-mega-menu-copy\/"},"modified":"2019-09-19T15:49:26","modified_gmt":"2019-09-19T14:49:26","slug":"accordion","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/accordion\/","title":{"rendered":"Accordion Menu"},"content":{"rendered":"<h3>Demo<\/h3>\n<p>Check out the menu on the left of this page to see a live demo of the Accordion menu.<\/p>\n<h3>Creating an Accordion Menu<\/h3>\n<p>Tip: If you are trying to add an accordion menu to a sidebar or page content, you can use the <a href=\"\/documentation\/widget\/\">Widget<\/a> or <a href=\"\/documentation\/shortcode\/\">Shortcode<\/a> method to add a new menu to your site.<\/p>\n<p>Accordion menus are built in exactly the same way as a standard WordPress menu.<\/p>\n<p>To switch your menu from a horizontal (default) to a vertical accordion menu, select &#8220;Accordion&#8221; from the Orientation dropdown in the Max Mega Menu settings:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/05\/accordion-wordpress-menu.png?bust\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16719\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/05\/accordion-wordpress-menu.png?bust\" alt=\"accordion-wordpress-menu\" width=\"1251\" height=\"790\" \/><\/a><\/p>\n<p>The accordion menu will respect the ordering and hierarchy of the menu.<\/p>\n<p>Just like any other menu created with Max Mega Menu, you have full control over the styling of the menu using the Theme Editor.<\/p>\n<p>You can create as many accordion menus as you need, outputting each one using either a shortcode, widget or PHP code.<\/p>\n<h3>Accordion Behaviour<\/h3>\n<p>A new option &#8211; Accordion Behaviour &#8211; will appear when the orientation is set to &#8216;Accordion&#8217;. There are two options:<\/p>\n<ul>\n<li>Keep Active Sub Menus Open &#8211; this will automatically open sub menus when you are on a sub page. This is the setting we&#8217;re using for the demo on the left (note how the &#8220;Pro Features&#8221; sub menu\u00a0is automatically expanded because we&#8217;re on a sub page).<\/li>\n<li>Always Close Sub Menus &#8211; all sub menus will be closed on page load. Users must click or hover over a heading to reveal a sub menu.<\/li>\n<\/ul>\n<h3>Recommended Settings<\/h3>\n<p>To avoid <a href=\"http:\/\/imgur.com\/gallery\/ORHjrTE\" target=\"_blank\" rel=\"noopener noreferrer\">terrible menu design<\/a>, the <strong>Event<\/strong> should be set to &#8216;<strong>Click<\/strong>&#8216; for accordion menus.<\/p>\n<p>Accordion Menus respect the <strong>&#8216;Second Click Behaviour<\/strong>&#8216; setting defined under <em>Mega Mega &gt; General Settings<\/em>. You can choose from &#8216;First click opens sub menu, second click closes sub menu&#8217; or &#8216;First click opens sub menu, second click follows link&#8217;. Regardless of the option chosen, the Arrow indicator will always toggle the sub menu.<\/p>\n<p>Accordion Menus also respect the &#8216;<strong>Mobile Menu Behaviour<\/strong>&#8216; setting defined under <em>Mega Mega &gt; General Settings<\/em>. On the documentation menu to the left, we have it set to &#8216;&#8221;Standard &#8211; Open menus remain open until closed by the user&#8221;. It is also possible to set it to &#8220;Accordion &#8211; Open menus automatically close when another is opened&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Demo Check out the menu on the left of this page to see a live demo of the Accordion menu. Creating an Accordion Menu Tip: If you are trying to add an accordion menu to a sidebar or page content, you can use the Widget or Shortcode method to add&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[16],"ht-kb-tag":[],"class_list":["post-16716","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-pro-features"],"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":"Demo Check out the menu on the left of this page to see a live demo of the Accordion menu. Creating an Accordion Menu Tip: If you are trying to add an accordion menu to a sidebar or page content, you can use the Widget or Shortcode method to add...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/16716","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=16716"}],"version-history":[{"count":16,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/16716\/revisions"}],"predecessor-version":[{"id":213776,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/16716\/revisions\/213776"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=16716"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=16716"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=16716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}