"Mega menu using bootstrap 4"
Bootstrap 4.1.1 Snippet by TejaNethas

<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 ----------> <nav class="navbar navbar-expand-lg navbar-dark bg-dark idm-navbar"> <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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> RESEARCH </a> <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown"> <div class="container"> <div class="row"> <div class="col-md-4"> <span class="text-uppercase text-white">RESEARCH</span> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">TOOLS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action</p> </div> <!-- /.col-md-4 --> </div> </div> <!-- /.container --> </div> </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"> TOOLS </a> <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown"> <div class="container"> <div class="row"> <div class="col-md-4"> <span class="text-uppercase text-white">Category 2</span> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action</p> </div> <!-- /.col-md-4 --> </div> </div> <!-- /.container --> </div> </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"> PEOPLE </a> <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown"> <div class="container"> <div class="row"> <div class="col-md-4"> <span class="text-uppercase text-white">Category 3</span> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action</p> </div> <!-- /.col-md-4 --> </div> </div> <!-- /.container --> </div> </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"> SYMPOSIUM </a> <div class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown"> <div class="container"> <div class="row"> <div class="col-md-4"> <span class="text-uppercase text-white">Category 3</span> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link item</a> </li> </ul> </div> <!-- /.col-md-4 --> <div class="col-md-4"> <a href=""> <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> </a> <p class="text-white">Short image call to action</p> </div> <!-- /.col-md-4 --> </div> </div> <!-- /.container --> </div> </li> </ul> </div> </nav>
/* adds some margin below the link sets */ .idm-navbar.navbar .dropdown-menu div[class*="col"] { margin-bottom:1rem; } .idm-navbar.navbar .dropdown-menu { border:none; } .idm-navbar.navbar-dark .navbar-nav .nav-link { color: #ffffff; } .idm-navbar.navbar-dark .navbar-nav .nav-link:focus, .idm-navbar.navbar-dark .navbar-nav .nav-link:hover { color: #f1815e; } /* 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 */ .idm-navbar.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 */ .idm-navbar.navbar .nav-item { padding:.5rem .5rem; margin:0 .25rem; } /* makes the dropdown full width */ .idm-navbar.navbar .dropdown {position:static;} .idm-navbar.navbar .dropdown-menu { width:100%; left:0; right:0; /* height of nav-item */ top: 95%; } /* shows the dropdown menu on hover */ .idm-navbar.navbar .dropdown:hover .dropdown-menu, .idm-navbar.navbar .dropdown .dropdown-menu:hover { display:block!important; } .idm-navbar.navbar .dropdown-menu { border: 0px solid transparent; background-color: #fff; border-top-left-radius: 0px; border-top-right-radius: 0px; border-radius:0px; } }
$(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: