Mega Dropdown Menu Navbar - Bootstrap 4 code snippet example demo . full width dropdown menu
A Pen by Jacob Lett on CodePen.
Created
December 16, 2019 18:49
-
-
Save alasomlira/c2d79a8de11660d22a3ec5448b89608f to your computer and use it in GitHub Desktop.
Bootstrap 4 Mega Dropdown Menu Navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> | |
| <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="#">Category</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"> | |
| Category 1 | |
| </a> | |
| <div class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <span class="text-uppercase text-white">Category 1</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"> | |
| Category 2 | |
| </a> | |
| <div class="dropdown-menu" 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"> | |
| Category 3 | |
| </a> | |
| <div class="dropdown-menu" 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> | |
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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 | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> | |
| <script src="https://jacoblett.github.io/bootstrap4-latest/bootstrap-4-latest.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| display:block; | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: visibility 0s, opacity 0.3s linear; | |
| } | |
| /* shows the dropdown menu on hover */ | |
| .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { | |
| display:block; | |
| visibility: visible; | |
| opacity: 1; | |
| transition: visibility 0s, opacity 0.3s linear; | |
| } | |
| .navbar .dropdown-menu { | |
| border: 1px solid rgba(0,0,0,.15); | |
| background-color: #fff; | |
| } | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment