{"id":355782,"date":"2022-09-19T14:17:31","date_gmt":"2022-09-19T13:17:31","guid":{"rendered":"https:\/\/www.megamenu.com\/?post_type=ht_kb&#038;p=355782"},"modified":"2023-10-04T11:44:48","modified_gmt":"2023-10-04T10:44:48","slug":"vertical-mega-menu","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/vertical-mega-menu\/","title":{"rendered":"Vertical Mega Menu"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-f56a869c wp-block-group-is-layout-flex\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div id=\"mega-menu-wrap-vertical_demo_navigation\" class=\"mega-menu-wrap\"><div class=\"mega-menu-toggle\"><div class=\"mega-toggle-blocks-left\"><\/div><div class=\"mega-toggle-blocks-center\"><\/div><div class=\"mega-toggle-blocks-right\"><div class='mega-toggle-block mega-menu-toggle-block mega-toggle-block-1'><button class='mega-toggle-standard mega-toggle-label' aria-haspopup='true' aria-expanded='false' aria-controls='mega-menu-vertical_demo_navigation'><span class='mega-toggle-label-closed'>MENU<\/span><span class='mega-toggle-label-open'>MENU<\/span><\/button><\/div><\/div><\/div><ul id=\"mega-menu-vertical_demo_navigation\" class=\"mega-menu max-mega-menu mega-menu-vertical mega-no-js\" data-event=\"hover\" data-effect=\"slide\" data-effect-speed=\"200\" data-effect-mobile=\"slide_left\" data-effect-speed-mobile=\"200\" data-mobile-force-width=\"false\" data-second-click=\"go\" data-document-click=\"collapse\" data-vertical-behaviour=\"standard\" data-breakpoint=\"968\" data-unbind=\"true\" data-mobile-state=\"collapse_all\" data-mobile-direction=\"vertical\" data-hover-intent-timeout=\"300\" data-hover-intent-interval=\"100\" data-overlay-desktop=\"false\" data-overlay-mobile=\"false\"><li class=\"mega-menu-item mega-menu-item-type-post_type mega-menu-item-object-page mega-menu-item-home mega-align-bottom-left mega-menu-flyout mega-menu-item-396664\" id=\"mega-menu-item-396664\"><a class=\"mega-menu-link\" href=\"https:\/\/www.megamenu.com\/\" tabindex=\"0\">Home<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-align-bottom-right mega-menu-flyout mega-menu-item-24517\" id=\"mega-menu-item-24517\"><a class=\"mega-menu-link\" href=\"http:\/\/#\" aria-expanded=\"false\" aria-controls=\"mega-sub-menu-24517\" tabindex=\"0\">Flyout Menu<span class=\"mega-indicator\" aria-hidden=\"true\"><\/span><\/a>\n<ul class=\"mega-sub-menu\">\n<li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-24416\" id=\"mega-menu-item-24416\"><a class=\"mega-menu-link\" href=\"http:\/\/#\">Flyout Item 1<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-24417\" id=\"mega-menu-item-24417\"><a class=\"mega-menu-link\" href=\"http:\/\/#\">Flyout Item 2<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-has-children mega-menu-item-24418\" id=\"mega-menu-item-24418\"><a class=\"mega-menu-link\" href=\"http:\/\/#\" aria-expanded=\"false\" aria-controls=\"mega-sub-menu-24418\">Flyout Item 3<span class=\"mega-indicator\" aria-hidden=\"true\"><\/span><\/a>\n\t<ul class=\"mega-sub-menu\">\n<li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-24420\" id=\"mega-menu-item-24420\"><a class=\"mega-menu-link\" href=\"http:\/\/#\">Flyout Item 3 \/ 1<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-24421\" id=\"mega-menu-item-24421\"><a class=\"mega-menu-link\" href=\"http:\/\/#\">Flyout Item 3 \/ 2<\/a><\/li>\t<\/ul>\n<\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-menu-item-24419\" id=\"mega-menu-item-24419\"><a class=\"mega-menu-link\" href=\"http:\/\/#\">Flyout Item 4<\/a><\/li><\/ul>\n<\/li><\/ul><button aria-controls=\"mega-menu-vertical_demo_navigation\" aria-label=\"Close\" class='mega-close'><\/button><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p><em>Vertical Mega Menus can be aligned to the left or right hand side of the page.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-a-vertical-mega-menu\">Creating a Vertical Mega Menu<\/h3>\n\n\n\n<p>Vertical Menus are set up in exactly the same way as a standard horizontal menu and support all of the same features.<\/p>\n\n\n\n<p>To switch your menu from a horizontal (default) to a vertical menu, select &#8220;Vertical&#8221; from the Orientation dropdown in the Max Mega Menu settings:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-1024x655.png\" alt=\"Screenshot showing admin settings for vertical mega menu\" class=\"wp-image-7643\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-1024x655.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-300x192.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-768x491.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-50x32.png 50w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-1064x680.png 1064w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-620x396.png 620w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-vertical-400x256.png 400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"important-sub-menu-alignment\">Important: Sub Menu Alignment<\/h3>\n\n\n\n<p>By default the sub menus will fly out to the&nbsp;<strong>left<\/strong>&nbsp;hand side of the menu.<\/p>\n\n\n\n<p>To make them fly out to the&nbsp;<strong>right<\/strong>&nbsp;of the menu, go to&nbsp;<em>Appearance &gt; Menus<\/em>. Hover over a top level menu item and click the blue &#8216;Mega Menu&#8217; button to open the settings panel. Set the &#8216;Sub Menu align&#8217; option to &#8220;Right&#8221;. Repeat this step for all top level menu items.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2646\" height=\"1692\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/04\/vertical-mega-menu-align.png\" alt=\"Vertical mega menu align option\" class=\"wp-image-1329\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/04\/vertical-mega-menu-align.png 2646w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/04\/vertical-mega-menu-align-300x192.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/04\/vertical-mega-menu-align-768x491.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/04\/vertical-mega-menu-align-1024x655.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/04\/vertical-mega-menu-align-50x32.png 50w\" sizes=\"auto, (max-width: 2646px) 100vw, 2646px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Vertical Mega Menus can be aligned to the left or right hand side of the page. Creating a Vertical Mega Menu Vertical Menus are set up in exactly the same way as a standard horizontal menu and support all of the same features. To switch your menu from a horizontal&#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":[16],"ht-kb-tag":[],"class_list":["post-355782","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":"Vertical Mega Menus can be aligned to the left or right hand side of the page. Creating a Vertical Mega Menu Vertical Menus are set up in exactly the same way as a standard horizontal menu and support all of the same features. To switch your menu from a horizontal...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/355782","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=355782"}],"version-history":[{"count":6,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/355782\/revisions"}],"predecessor-version":[{"id":397026,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/355782\/revisions\/397026"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=355782"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=355782"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=355782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}