{"id":281,"date":"2015-03-12T15:03:54","date_gmt":"2015-03-12T15:03:54","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=281"},"modified":"2019-09-19T15:44:32","modified_gmt":"2019-09-19T14:44:32","slug":"flyout-menus","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/flyout-menus\/","title":{"rendered":"Flyout Menus"},"content":{"rendered":"<p>Hierarchical menu items will be displayed in a flyout menu by default. No\u00a0special configuration is needed, simply set up your menu items in a hierarchy in the menu editor in WordPress.<\/p>\n<p>Flyout menus show one level of menu items at a time, expanding as the user hovers or clicks each item.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/max-mega-menu-after.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4145\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/max-mega-menu-after.png\" alt=\"After\" width=\"1196\" height=\"705\" \/><\/a><\/p>\n<h3>Flyout Menu Alignment<\/h3>\n<p>By default the flyout menu will be aligned to the left hand edge of the parent item. To align the flyout menu to the right hand edge of the parent menu item (and make sub menu&#8217;s flyout to the right), change the &#8220;Sub Menu Align&#8221; setting in the Mega Menu settings for the parent item.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-213712\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu.png\" alt=\"\" width=\"2646\" height=\"1692\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu.png 2646w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu-300x192.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu-768x491.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu-1024x655.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout-menu-50x32.png 50w\" sizes=\"auto, (max-width: 2646px) 100vw, 2646px\" \/><\/a><\/p>\n<p>The following is a screenshot\u00a0demonstrating the following settings on the &#8220;Animals&#8221; menu item:<\/p>\n<ul>\n<li>Menu Item Align: Right<\/li>\n<li>Sub Menu Align: Right edge of parent<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16322\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/right-aligned-flyout.png?bust\" alt=\"right-aligned-flyout\" width=\"1196\" height=\"726\" \/><\/a><\/p>\n<p><a class=\"arrow-btn\" style=\"float: right;\" href=\"\/documentation\/menu-item-options\/\">Next up: Menu Item Options<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hierarchical menu items will be displayed in a flyout menu by default. No\u00a0special configuration is needed, simply set up your menu items in a hierarchy in the menu editor in WordPress. Flyout menus show one level of menu items at a time, expanding as the user hovers or clicks each&#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":[13],"ht-kb-tag":[],"class_list":["post-281","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-getting-started"],"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":"Hierarchical menu items will be displayed in a flyout menu by default. No\u00a0special configuration is needed, simply set up your menu items in a hierarchy in the menu editor in WordPress. Flyout menus show one level of menu items at a time, expanding as the user hovers or clicks each...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/281","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=281"}],"version-history":[{"count":6,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/281\/revisions"}],"predecessor-version":[{"id":213768,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/281\/revisions\/213768"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=281"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}