"Bootsrap 4 megamenu"
Bootstrap 4.0.0 Snippet by olivierlabbe

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Mega Dropdown</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Categories </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <div class="container-fluid"> <div class="row"> <nav> <div class="nav nav-pills flex-column" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div> </div> </div> <!-- /.container --> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
/* adds some margin below the link sets */ .navbar .dropdown-menu div[class*="col"] { margin-bottom:1rem; } .navbar .dropdown-menu { border:none; background-color:#0060c8!important; } /* breakpoint and up - mega dropdown styles */ @media screen and (min-width: 992px) { /* remove the padding from the navbar so the dropdown hover state is not broken */ .navbar { padding-top:0px; padding-bottom:0px; } /* remove the padding from the nav-item and add some margin to give some breathing room on hovers */ .navbar .nav-item { padding:.5rem .5rem; margin:0 .25rem; } /* makes the dropdown full width */ .navbar .dropdown {position:static;} .navbar .dropdown-menu { width:100%; left:0; right:0; /* height of nav-item */ top:45px; } /* shows the dropdown menu on hover */ .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { display:block!important; } .navbar .dropdown-menu { border: 1px solid rgba(0,0,0,.15); background-color: #fff; } }
$(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready // breakpoint and up $(window).resize(function(){ if ($(window).width() >= 980){ // when you hover a toggle show its dropdown menu $(".navbar .dropdown-toggle").hover(function () { $(this).parent().toggleClass("show"); $(this).parent().find(".dropdown-menu").toggleClass("show"); }); // hide the menu when the mouse leaves the dropdown $( ".navbar .dropdown-menu" ).mouseleave(function() { $(this).removeClass("show"); }); // do something here } }); // document ready });

Related: See More


Questions / Comments: