{"id":4107,"date":"2016-11-15T22:41:12","date_gmt":"2016-11-15T12:41:12","guid":{"rendered":"http:\/\/codemyui.com\/?p=4107"},"modified":"2018-05-17T09:51:39","modified_gmt":"2018-05-16T23:51:39","slug":"responsive-mega-menu-snippet-expandable-sections","status":"publish","type":"post","link":"https:\/\/codemyui.com\/responsive-mega-menu-snippet-expandable-sections\/","title":{"rendered":"Responsive Mega Menu Snippet with Expandable Sections"},"content":{"rendered":"<p>This snippet will allow you to add a responsive mega menu to your website. Mega menus are great when you have a lot of content that you want to show in the <a href=\"https:\/\/codemyui.com\/category\/navigation-menu\/\">navigation element<\/a>. Using this you can add all that and even images to your navigation menu. And being responsive it adapts very fluidly to the mobile screen as well. Designed by  Mahesh.<\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/7b14158bd4736abdbed0f52c83e80177\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='518' data-theme-id='0' data-slug-hash='KgyKBZ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Responsive Mega menu with logo by Mahesh (@maheshambure21) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This snippet will allow you to add a responsive mega menu to your website. Mega menus are great when you have a lot of content that you want to show in the navigation element. Using this you can add all that and even images to your navigation menu. And being responsive it adapts very fluidly&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/responsive-mega-menu-snippet-expandable-sections\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":4110,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[237615242,1520705],"class_list":["post-4107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hamburger-menu","tag-navigation-menu","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/mega-menu.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29331,"url":"https:\/\/codemyui.com\/mega-menu-with-blog-posts-and-categories\/","url_meta":{"origin":4107,"position":0},"title":"Mega Menu with Blog Posts and Categories","author":"Saijo George","date":"January 30, 2020","format":false,"excerpt":"Here is a nice snippet to showcase both categories or services along with related blog posts within the navigation menu dropdown. This pure CSS snippet also has a nice hover effect for the logo. If you are having trouble with the pen, try the archived copy on GitHub Mega Menu\u2026","rel":"","context":"In \"navigation menu\"","block_context":{"text":"navigation menu","link":"https:\/\/codemyui.com\/tag\/navigation-menu\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Mega-Menu-with-Blog-Posts-and-Categories.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Mega-Menu-with-Blog-Posts-and-Categories.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Mega-Menu-with-Blog-Posts-and-Categories.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Mega-Menu-with-Blog-Posts-and-Categories.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":912,"url":"https:\/\/codemyui.com\/simple-mega-menu-pure-css\/","url_meta":{"origin":4107,"position":1},"title":"A Simple Mega Menu in Pure CSS","author":"Hima Vincent","date":"June 27, 2016","format":false,"excerpt":"Most of the time a menu is the starting point for your users on the website and when it comes to big e-commerce sites there is no way you are able to add all the important navigation elements on a standard menu. Today we are looking a simple mega menu\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"A Simple Mega Menu in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/06\/a-simple-mega-menu-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12148,"url":"https:\/\/codemyui.com\/responsive-fullscreen-section-navigation-menu\/","url_meta":{"origin":4107,"position":2},"title":"Responsive Fullscreen Section Navigation Menu","author":"Hima Vincent","date":"February 28, 2017","format":false,"excerpt":"A fullscreen responsive section navigation menu designed by Ettrics. The menu is stuck to the bottom of the page and when you scroll down the menu moves up and sticks to the top. If you are having trouble with the pen, try the archived copy on GitHub Fullscreen Section Navigation\u2026","rel":"","context":"In \"hero section\"","block_context":{"text":"hero section","link":"https:\/\/codemyui.com\/tag\/hero-section\/"},"img":{"alt_text":"Responsive Fullscreen Section Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/responsive-fullscreen-section-navigation-menu-1.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26702,"url":"https:\/\/codemyui.com\/css-only-responsive-navigation-menu\/","url_meta":{"origin":4107,"position":3},"title":"CSS Only Responsive Navigation Menu","author":"Saijo George","date":"July 18, 2018","format":false,"excerpt":"If you need a simple responsive CSS only navigation menu you will love this one by Mayur Suthar. On mobile, the menu turns into a hamburger menu and on clicking it the menu turns into a drop-down. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"hamburger menu\"","block_context":{"text":"hamburger menu","link":"https:\/\/codemyui.com\/tag\/hamburger-menu\/"},"img":{"alt_text":"CSS Only Responsive Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17494,"url":"https:\/\/codemyui.com\/circular-navigation-menu\/","url_meta":{"origin":4107,"position":4},"title":"Circular Navigation Menu","author":"Hima Vincent","date":"May 31, 2017","format":false,"excerpt":"A striking navigation menu that has the links in a circular fashion. On hover, the background colour changes as well. It was designed by Rachel Smith If you are having trouble with the pen, try the archived copy on GitHub Circular Navigation Menu Snippet","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"Circular Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-navigation-menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-navigation-menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/circular-navigation-menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26566,"url":"https:\/\/codemyui.com\/hamburger-menu-to-sidebar-navigation-menu\/","url_meta":{"origin":4107,"position":5},"title":"Hamburger Menu to Sidebar Navigation Menu","author":"Saijo George","date":"July 7, 2018","format":false,"excerpt":"In this code snippet, the hamburger menu icon transforms into the sidebar navigation menu on click and on clicking the x icon on the menu it collapses back to a hamburger menu. If you are having trouble with the pen, try the archived copy on GitHub Hamburger Menu to Sidebar\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Hamburger Menu to Sidebar Navigation Menu Snippet","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Hamburger-Menu-to-Sidebar-Navigation-Menu-Snippet.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=4107"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4107\/revisions"}],"predecessor-version":[{"id":25988,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4107\/revisions\/25988"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/4110"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=4107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=4107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=4107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}