{"id":1510,"date":"2016-05-09T08:20:16","date_gmt":"2016-05-09T08:20:16","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1510"},"modified":"2023-09-24T14:01:12","modified_gmt":"2023-09-24T14:01:12","slug":"a-bootstrap-mega-menu-template-with-3-styles","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/","title":{"rendered":"A Bootstrap mega menu template with 3 styles"},"content":{"rendered":"

The mega menu template<\/strong><\/h3>\n

The mega menu, as clicked or opened takes the much space of the visible screen where you may show plenty of information including the\u00a0links to categories, sub-categories, some special collection\/products as well.<\/p>\n

You might have seen mega menu developed by using different web techniques, I am going to show you a large menu based on Bootstrap framework. So, if you are working in a Bootstrap based project and need to present lots of informative links and content in menu , you may try this mega menu.<\/p>\n

Steps for creating the mega menu in Bootstrap \u2013 A demo<\/strong><\/h3>\n

Just like other header menus in Bootstrap, it starts with the main navbar<\/strong> class. Inside that, you will use navbar-header<\/em> that deals with the\u00a0mobile-menu (the typical three lines).<\/p>\n

For the mega menu, the mega-dropdown-menu<\/em> class is used along with other classes. You can see other classes related to mega-dropdown-menu in the <style> section that defines the layout, color etc. of the menu.<\/p>\n

See this demo online, click on the Web item to open the large menu:<\/p>\n

\"Bootstrap<\/p>\n

See online demo and code<\/strong><\/h6>\n

The sliding of images in \u201cLatest Products\u201d or \u2018Collection\u201d in achieved by using the carousel component:<\/p>\n

<li class=\"dropdown-header\">Latest Products<\/li>\r\n\r\n<div id=\"myCarousel\" class=\"carousel slide\" data-ride=\"carousel\">\r\n\r\n<div class=\"carousel-inner\">\r\n\r\n<div class=\"item active\">\r\n\r\n<a href=\"#\"><img src=\"http:\/\/placehold.it\/254x150\/3498db\/f5f5f5\/&text=New+Collection\" class=\"img-responsive\" alt=\"jQuery\"><\/a>\r\n\r\n<h4><small>A jQuery editor<\/small><\/h4>\r\n\r\n<button class=\"btn btn-primary\" type=\"button\">$25.99<\/button>\r\n\r\n<button href=\"#\" class=\"btn btn-default\" type=\"button\"><span class=\"glyphicon glyphicon-heart\"><\/span> Add to Wishlist<\/button>\r\n\r\n<\/div><\/pre>\n
 <\/p>\n
See the complete code including JS, markup and CSS in the demo page.<\/p>\n
The red mega menu \u2013 Theme 2<\/strong><\/h3>\n
In this demo, a mega menu which is similar to above template is created with the\u00a0red scheme. For that, the btn-danger class for buttons is used with the combination of btn-info. A few other properties are also changed along with overriding the navbar-default class. First, have a look at the demo online:<\/p>\n
\"Bootstrap<\/p>\n
See online demo and code<\/strong><\/h6>\n
You may change the scheme as per the\u00a0need of your project. For the background of the top bar where it says \u201cMega Menu\u201d and \u201cWeb Technologies\u201d, you have to change the navbar-default class properties. For that, simple copy the class from main Bootstrap CSS file and paste it in the <style> section or to your external CSS file. I did this in the <style> section:<\/p>\n
.navbar-default {\r\n\r\nbackground-color: #B00000;\r\n\r\nborder-color: #425766;\r\n\r\n}<\/pre>\n
 <\/p>\n
It will override the default color of the class. Make sure to include this after the reference of Bootstrap\u2019s CSS file.<\/p>\n
For changing the colors of mega menu that pull down as you click the \u2018Web Technologies\u201d, change these classes in the <style> section:<\/p>\n
.mega-dropdown-menu {\r\n\r\npadding: 20px 0px;\r\n\r\nwidth: 100%;\r\n\r\nbox-shadow: none;\r\n\r\n-webkit-box-shadow: none;\r\n\r\nbackground-color:#FFD9D9;\r\n\r\n}<\/pre>\n
 <\/p>\n
For managing the color of header menus like Bootstrap, Carousel, Web, Databases; find and modify this class:<\/p>\n
.mega-dropdown-menu .dropdown-header {\r\n\r\ncolor: #B00000;\r\n\r\nfont-size: 18px;\r\n\r\nfont-weight: bold;\r\n\r\n}<\/pre>\n
 <\/p>\n
You many change the menu items color as well. Just play by changing the properties!<\/p>\n
The green Bootstrap based mega menu<\/strong><\/h3>\n
Have a look at another style that used green scheme.<\/p>\n
\"Bootstrap<\/p>\n
See online demo and code<\/strong><\/h6>\n
The same set of classes is modified as in above example.<\/p>\n
Credit: Atiq ur Rehman<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
The mega menu template The mega menu, as clicked or opened takes the much space of the visible screen where you may show plenty of information including the\u00a0links to categories, sub-categories, some special collection\/products as well. You might have seen mega menu developed by using different web techniques, I am going to show you a … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1512,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[16],"tags":[34],"yoast_head":"\nA Bootstrap mega menu template with 3 styles<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Bootstrap mega menu template with 3 styles\" \/>\n<meta property=\"og:description\" content=\"The mega menu template The mega menu, as clicked or opened takes the much space of the visible screen where you may show plenty of information including the\u00a0links to categories, sub-categories, some special collection\/products as well. You might have seen mega menu developed by using different web techniques, I am going to show you a ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-09T08:20:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-24T14:01:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/32.0_2-Bootstrap-mega-menu-Red.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"718\" \/>\n\t<meta property=\"og:image:height\" content=\"444\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/\",\"url\":\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/\",\"name\":\"A Bootstrap mega menu template with 3 styles\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-05-09T08:20:16+00:00\",\"dateModified\":\"2023-09-24T14:01:12+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Bootstrap mega menu template with 3 styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A Bootstrap mega menu template with 3 styles","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/","og_locale":"en_US","og_type":"article","og_title":"A Bootstrap mega menu template with 3 styles","og_description":"The mega menu template The mega menu, as clicked or opened takes the much space of the visible screen where you may show plenty of information including the\u00a0links to categories, sub-categories, some special collection\/products as well. You might have seen mega menu developed by using different web techniques, I am going to show you a ... Read more","og_url":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/","article_published_time":"2016-05-09T08:20:16+00:00","article_modified_time":"2023-09-24T14:01:12+00:00","og_image":[{"width":718,"height":444,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/05\/32.0_2-Bootstrap-mega-menu-Red.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/","url":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/","name":"A Bootstrap mega menu template with 3 styles","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-05-09T08:20:16+00:00","dateModified":"2023-09-24T14:01:12+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/a-bootstrap-mega-menu-template-with-3-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"A Bootstrap mega menu template with 3 styles"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1510"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1510"}],"version-history":[{"count":3,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1510\/revisions"}],"predecessor-version":[{"id":9567,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1510\/revisions\/9567"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1512"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}