"Responsive Mega Menu"
Bootstrap 4.1.1 Snippet by md-ataur

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <center><h2>Responsvie mega menu</h2></center> <div class="row"> <div class="col-sm-12 px-0"> <div class="menubar"> <nav id="mobile-menu"> <ul> <li><a href="index.html">Home</a></li> <li> <a href="#">Products</a> <ul class="mega-menu"> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> </ul> </li> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Decorative accessories</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Small Storage</a></li> </ul> </li> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Small Storage</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> <li><a href="#">Kichen & dining</a></li> </ul> </li> <li> <a href="#">Furniture Category</a> <ul> <li><a href="#">Small Storage</a></li> <li><a href="#">Chaise and day beds</a></li> <li><a href="#">Stools & Benches</a></li> <li><a href="#">Lounge Chairs</a></li> <li><a href="#">Sofa armchairs</a></li> </ul> </li> </ul> </li> <li> <a href="#">Pages</a> <ul class="mega-menu"> <li> <a href="#">Home Styles</a> <ul> <li><a href="#">Home style 01</a></li> <li><a href="#">Home style 02</a></li> <li><a href="#">Home style 03</a></li> <li><a href="#">Home style 04</a></li> </ul> </li> <li> <a href="#">Shop Pages</a> <ul> <li><a href="#">Shop Grid</a></li> <li><a href="#">Shop List</a></li> <li><a href="#">Shop Detail</a></li> <li><a href="#">Shopping cart</a></li> </ul> </li> <li> <a href="#">Other Pages</a> <ul> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> <li><a href="#">Wishlist</a></li> <li><a href="#">Checkout</a></li> <li><a href="#">404</a></li> </ul> </li> <li> <a href="#">Blog Pages</a> <ul> <li><a href="#">2 Colums Blog</a></li> <li><a href="#">Blog Details</a></li> </ul> </li> </ul> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> </div> </div> <div class="col-12 d-xl-none"> <div class="mobile-menu"></div> </div> </div> </div>
/* Nav Menu */ .menubar { margin: 10px 0; } .menubar nav ul { margin: 0; padding: 0; list-style: none; } .menubar nav ul li { display: inline-block; margin: 0 20px 0 0; } .menubar nav ul li a { display: block; font-size: 12px; font-family: "Poppins", sans-serif; font-weight: 500; padding: 25px 0; letter-spacing: 0.5px; color: #000000; text-transform: uppercase; text-decoration: none; transition: 0.3s; } .menubar nav ul li:hover > a { text-decoration: none; color: #dd7e2e; } .menubar nav ul li ul.mega-menu { width: 100%; display: block; position: absolute; background:#ffffff; top: 100%; left: 0; transition: 0.3s; box-shadow: 0px 5px 8px rgba(106, 106, 106, 0.4); border: 1px solid #ebebeb; padding: 24px 30px; visibility: hidden; opacity: 0; } .menubar nav ul li ul.mega-menu li { width: 25%; float: left; display: block; margin: 0; padding: 6px 0px; } .menubar nav ul li ul.mega-menu li > a { text-transform: uppercase; font-size: 12px; padding: 0; font-weight: 500; margin-bottom: 20px; } .menubar nav ul li ul.mega-menu li:hover > a { color: #222222; } .menubar nav ul li ul.mega-menu li > ul { display: block; } .menubar nav ul li ul.mega-menu li > ul li { width: auto; float: none; } .menubar nav ul li ul.mega-menu li > ul li > a { text-transform: none; font-weight: 300; font-size: 13px; margin: 0; } .menubar nav ul li ul.mega-menu li > ul li a:hover { color: #dd7e2e; } .menubar nav ul li:hover .mega-menu { visibility: visible; opacity: 1; z-index: 99; } /*Meanmenu*/ /* hide the link until viewport size is reached */ a.meanmenu-reveal { display: none; } /* when under viewport size, .mean-container is added to body */ .mean-container .mean-bar { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; float: left; position: relative; width: 100%; z-index: 99; } .mean-container a.meanmenu-reveal { border: 1px solid #222222; color: #222222; cursor: pointer; display: block; font-family: Arial,Helvetica,sans-serif; font-size: 1px; font-weight: 700; height: 40px; line-height: 37px; margin-top: -54px; padding: 5px 9px; position: absolute; right: 0; text-decoration: none; top: 0; width: 34px; } .mean-container a.meanmenu-reveal span { background: #222222; display: block; height: 3px; margin-top: 5px; position: relative; top: 6px; } .mean-container .mean-nav { background: #1d1d1d ; float: left; margin-top: 15px; width: 100%; } .mean-container .mean-nav ul { padding: 0; margin: 0; width: 100%; list-style-type: none; } .mean-container .mean-nav ul li { position: relative; float: left; width: 100%; } .mean-container .mean-nav ul li a { border-top: 1px solid rgba(255, 255, 255, 0.5); color: #fff; display: block; float: left; margin: 0; padding: 10px 5%; text-align: left; text-decoration: none; text-transform: uppercase; width: 90%; font-size: 12px; } .mean-container .mean-nav ul li li a { border-top: 1px solid rgba(255, 255, 255, 0.25); opacity: 0.75; padding: 10px 10%; text-shadow: none; visibility: visible; width: 80%; } .mean-container .mean-nav ul li.mean-last a { border-bottom: none; margin-bottom: 0; } .mean-container .mean-nav ul li li li a { width: 70%; padding: 1em 15%; } .mean-container .mean-nav ul li li li li a { width: 60%; padding: 1em 20%; } .mean-container .mean-nav ul li li li li li a { width: 50%; padding: 1em 25%; } .mean-container .mean-nav ul li a:hover { background: #252525; background: rgba(255,255,255,0.1); } .mean-container .mean-nav ul li a.mean-expand { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.4); border-image: none; border-style: none none solid solid; border-width: medium medium 1px 1px; font-weight: 700; height: 27px; margin-top: 1px; padding: 5px 12px; position: absolute; right: 0; text-align: center; top: 0; width: 26px; z-index: 2; } .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(0,0,0,0.9); } .mean-container .mean-push { float: left; width: 100%; padding: 0; margin: 0; clear: both; } .mean-nav .wrapper { width: 100%; padding: 0; margin: 0; } /* Fix for box sizing on Foundation Framework etc. */ .mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mean-remove { display: none !important; } .transparent-header .mean-container a.meanmenu-reveal { border: 1px solid #FE4536; color: #FE4536; } .transparent-header .mean-container a.meanmenu-reveal span { background: #FE4536; } .transparent-header-2 .mean-container a.meanmenu-reveal { border: 1px solid #fff; color: #fff; } .transparent-header-2 .mean-container a.meanmenu-reveal span { background: #fff; } .header-2 .mean-container a.meanmenu-reveal { border: 1px solid #fff; color: #fff; } .header-2 .mean-container a.meanmenu-reveal span { background: #fff; }
/*! * jQuery meanMenu v2.0.8 * @Copyright (C) 2012-2014 Chris Wharton @ MeanThemes (https://github.com/meanthemes/meanMenu) * */ /* * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND COPYRIGHT * HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR * FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE * OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD PARTY PATENTS, * COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.COPYRIGHT HOLDERS WILL NOT * BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL * DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENTATION. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://gnu.org/licenses/>. * * Find more information at http://www.meanthemes.com/plugins/meanmenu/ * */ (function ($) { "use strict"; $.fn.meanmenu = function (options) { var defaults = { meanMenuTarget: jQuery(this), // Target the current HTML markup you wish to replace meanMenuContainer: 'body', // Choose where meanmenu will be placed within the HTML meanMenuClose: "X", // single character you want to represent the close menu button meanMenuCloseSize: "18px", // set font size of close button meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closed meanRevealPosition: "right", // left right or center positions meanRevealPositionDistance: "0", // Tweak the position of the menu meanRevealColour: "", // override CSS colours for the reveal background meanScreenWidth: "480", // set the screen width you want meanmenu to kick in at meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing. meanShowChildren: true, // true to show children in the menu, false to hide them meanExpandableChildren: true, // true to allow expand/collapse children meanExpand: "+", // single character you want to represent the expand for ULs meanContract: "-", // single character you want to represent the contract for ULs meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them onePage: false, // set to true for one page sites meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell removeElements: "" // set to hide page elements }; options = $.extend(defaults, options); // get browser width var currentWidth = window.innerWidth || document.documentElement.clientWidth; return this.each(function () { var meanMenu = options.meanMenuTarget; var meanContainer = options.meanMenuContainer; var meanMenuClose = options.meanMenuClose; var meanMenuCloseSize = options.meanMenuCloseSize; var meanMenuOpen = options.meanMenuOpen; var meanRevealPosition = options.meanRevealPosition; var meanRevealPositionDistance = options.meanRevealPositionDistance; var meanRevealColour = options.meanRevealColour; var meanScreenWidth = options.meanScreenWidth; var meanNavPush = options.meanNavPush; var meanRevealClass = ".meanmenu-reveal"; var meanShowChildren = options.meanShowChildren; var meanExpandableChildren = options.meanExpandableChildren; var meanExpand = options.meanExpand; var meanContract = options.meanContract; var meanRemoveAttrs = options.meanRemoveAttrs; var onePage = options.onePage; var meanDisplay = options.meanDisplay; var removeElements = options.removeElements; //detect known mobile/tablet usage var isMobile = false; if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i))) { isMobile = true; } if ((navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i))) { // add scrollbar for IE7 & 8 to stop breaking resize function on small content sites jQuery('html').css("overflow-y", "scroll"); } var meanRevealPos = ""; var meanCentered = function () { if (meanRevealPosition === "center") { var newWidth = window.innerWidth || document.documentElement.clientWidth; var meanCenter = ((newWidth / 2) - 22) + "px"; meanRevealPos = "left:" + meanCenter + ";right:auto;"; if (!isMobile) { jQuery('.meanmenu-reveal').css("left", meanCenter); } else { jQuery('.meanmenu-reveal').animate({ left: meanCenter }); } } }; var menuOn = false; var meanMenuExist = false; if (meanRevealPosition === "right") { meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;"; } if (meanRevealPosition === "left") { meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;"; } // run center function meanCentered(); // set all styles for mean-reveal var $navreveal = ""; var meanInner = function () { // get last class name if (jQuery($navreveal).is(".meanmenu-reveal.meanclose")) { $navreveal.html(meanMenuClose); } else { $navreveal.html(meanMenuOpen); } }; // re-instate original nav (and call this on window.width functions) var meanOriginal = function () { jQuery('.mean-bar,.mean-push').remove(); jQuery(meanContainer).removeClass("mean-container"); jQuery(meanMenu).css('display', meanDisplay); menuOn = false; meanMenuExist = false; jQuery(removeElements).removeClass('mean-remove'); }; // navigation reveal var showMeanMenu = function () { var meanStyles = "background:" + meanRevealColour + ";color:" + meanRevealColour + ";" + meanRevealPos; if (currentWidth <= meanScreenWidth) { jQuery(removeElements).addClass('mean-remove'); meanMenuExist = true; // add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container' jQuery(meanContainer).addClass("mean-container"); jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="' + meanStyles + '">Show Navigation</a><nav class="mean-nav"></nav></div>'); //push meanMenu navigation into .mean-nav var meanMenuContents = jQuery(meanMenu).html(); jQuery('.mean-nav').html(meanMenuContents); // remove all classes from EVERYTHING inside meanmenu nav if (meanRemoveAttrs) { jQuery('nav.mean-nav ul, nav.mean-nav ul *').each(function () { // First check if this has mean-remove class if (jQuery(this).is('.mean-remove')) { jQuery(this).attr('class', 'mean-remove'); } else { jQuery(this).removeAttr("class"); } jQuery(this).removeAttr("id"); }); } // push in a holder div (this can be used if removal of nav is causing layout issues) jQuery(meanMenu).before('<div class="mean-push" />'); jQuery('.mean-push').css("margin-top", meanNavPush); // hide current navigation and reveal mean nav link jQuery(meanMenu).hide(); jQuery(".meanmenu-reveal").show(); // turn 'X' on or off jQuery(meanRevealClass).html(meanMenuOpen); $navreveal = jQuery(meanRevealClass); //hide mean-nav ul jQuery('.mean-nav ul').hide(); // hide sub nav if (meanShowChildren) { // allow expandable sub nav(s) if (meanExpandableChildren) { jQuery('.mean-nav ul ul').each(function () { if (jQuery(this).children().length) { jQuery(this, 'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: ' + meanMenuCloseSize + '">' + meanExpand + '</a>'); } }); jQuery('.mean-expand').on("click", function (e) { e.preventDefault(); if (jQuery(this).hasClass("mean-clicked")) { jQuery(this).text(meanExpand); jQuery(this).prev('ul').slideUp(300, function () {}); } else { jQuery(this).text(meanContract); jQuery(this).prev('ul').slideDown(300, function () {}); } jQuery(this).toggleClass("mean-clicked"); }); } else { jQuery('.mean-nav ul ul').show(); } } else { jQuery('.mean-nav ul ul').hide(); } // add last class to tidy up borders jQuery('.mean-nav ul li').last().addClass('mean-last'); $navreveal.removeClass("meanclose"); jQuery($navreveal).click(function (e) { e.preventDefault(); if (menuOn === false) { $navreveal.css("text-align", "center"); $navreveal.css("text-indent", "0"); $navreveal.css("font-size", meanMenuCloseSize); jQuery('.mean-nav ul:first').slideDown(); menuOn = true; } else { jQuery('.mean-nav ul:first').slideUp(); menuOn = false; } $navreveal.toggleClass("meanclose"); meanInner(); jQuery(removeElements).addClass('mean-remove'); }); // for one page websites, reset all variables... if (onePage) { jQuery('.mean-nav ul > li > a:first-child').on("click", function () { jQuery('.mean-nav ul:first').slideUp(); menuOn = false; jQuery($navreveal).toggleClass("meanclose").html(meanMenuOpen); }); } } else { meanOriginal(); } }; if (!isMobile) { // reset menu on resize above meanScreenWidth jQuery(window).resize(function () { currentWidth = window.innerWidth || document.documentElement.clientWidth; if (currentWidth > meanScreenWidth) { meanOriginal(); } else { meanOriginal(); } if (currentWidth <= meanScreenWidth) { showMeanMenu(); meanCentered(); } else { meanOriginal(); } }); } jQuery(window).resize(function () { // get browser width currentWidth = window.innerWidth || document.documentElement.clientWidth; if (!isMobile) { meanOriginal(); if (currentWidth <= meanScreenWidth) { showMeanMenu(); meanCentered(); } } else { meanCentered(); if (currentWidth <= meanScreenWidth) { if (meanMenuExist === false) { showMeanMenu(); } } else { meanOriginal(); } } }); // run main menuMenu function on load showMeanMenu(); }); }; $('#mobile-menu').meanmenu({ meanMenuContainer: '.mobile-menu', meanScreenWidth: "991" }); })(jQuery);

Related: See More


Questions / Comments: