Bootstrap 4 Mega Dropdown Menu

A mega dropdown menu is a menu that contains multiple levels. It allows a lot of links to be contained in a single dropdown without compromising usability. This article will understand how to create a bootstrap 4 mega dropdown menu.

Following are the various examples of bootstrap 4 mega dropdown menu.

Example 1:

  <! DOCTYPE html>  <html lang = “en”>  <head>  <meta charset = “utf-8” />  <meta name = “viewport” content = “width=device-width, initial-scale=1″>  <title> Bootstrap 4 Mega dropdown Menu </title>  <link rel=”stylesheet”  href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css”>  <script src =  “https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”>  </script>  <script src =  “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js”>  </script>  <script src =  “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js”>  </script>  <style>  .megamenu-li {  position: static;  }  .megamenu {  position: absolute;  width: 100%;  left: 0;  right: 0;  padding: 15px;  }  body {     text-align: center;    padding: 20px;  background: linear-gradient(144deg, #ff2400, #e81d1d, #e8b71d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);  background-size: 1800% 1800%;  font-family: “Lucida Console”, “Courier New”, monospace;  -webkit-animation: rainbow 18s ease infinite;  -z-animation: rainbow 13s ease infinite;  -o-animation: rainbow 17s ease infinite;    animation: rainbow 14s ease infinite; }  @-moz-keyframes rainbow {          0% { background-position: 10% 62% }      50% { background-position: 10% 39% }      100% { background-position: 10% 82% }  }  @-o-keyframes rainbow {      0% { background-position: 10% 82% }      50% { background-position: 10% 19% }      100% { background-position: 0% 82% }  }  @keyframes rainbow {           0% { background-position: 0% 82% }      50% { background-position: 100% 19% }      100% { background-position: 0% 82% }  }  h2 {   text-align: center;   color: black;   font-size: 28px;   width: 100%;   margin: 20px 10;   position: relative;   line-height: 58px;   font-weight: 400;   }  h2:before {   content: ” “;   position: absolute;   left: 50%;   bottom: 10;   width: 100px;   height: 2px;  font-weight: bold;   background-color: #2079df;   margin-left: -50px;   }  h1 {      position: relative;      padding: 10;      margin: 20;      font-family: “Raleway”, sans-serif;      font-weight: 200;      font-size: 40px;      color: white;      -webkit-transition: all 0.4s ease 0s;      -o-transition: all 0.4s ease 0s;      transition: all 0.4s ease 0s;    }    </style>  </head>  <body>  <center>  <h1> Example </h1>  <h2> Bootstrap 4 Mega dropdown Menu </h2>  </center>  <div class = “container”>   <div class = “row”>    <div class = “col-12”>     <nav class = “navbar navbar-expand-lg navbar-light bg-light rounded”>      <a class = “navbar-brand” href=”#”> Bootstrap 4 Mega Menu </a>      <button class = “navbar-toggler” type = “button” data-toggle = “collapse” data-target = “#navbar” aria-controls = “navbars” aria-expanded = “false” aria-label = “Toggle navigation”>  <span class = “navbar-toggler-icon”> </span>    </button>      <div class = “collapse navbar-collapse” id = “navbar”>       <ul class = “navbar-nav mr-auto”>        <li class = “nav-item dropdown megamenu-li”>         <a class = “nav-link dropdown-toggle” href=”../ ” id = “dropdown01” data-toggle = “dropdown” aria-haspopup = “true” aria-expanded = “false”>Mega Menu 1 </a>         <div class = “dropdown-menu megamenu” aria-labelledby = “dropdown01”>          <div class = “row”>           <div class = “col-sm-6 col-lg-3”>            <h5> Links </h5>            <a class = “dropdown-item” href=”#”> Home </a>            <a class = “dropdown-item” href=”#”> About US </a>            <a class = “dropdown-item” href=”#”> Gallery </a>            <a class = “dropdown-item” href=”#”> Contact US </a>           </div>           <div class = “col-sm-6 col-lg-3”>            <h5> More Links </h5>                      <a class = “dropdown-item” href=”#”> Home </a>            <a class = “dropdown-item” href=”#”> About US </a>            <a class = “dropdown-item” href=”#”> Gallery </a>            <a class = “dropdown-item” href=”#”> Contact US </a>           </div>           <div class = “col-sm-6 col-lg-3”>            <h5> Paragraph </h5>            <p> Lorem ipsum dolor sit amet, adipisicing elit. </p>           </div>           <div class = “col-sm-6 col-lg-3”>            <h5> Image </h5>            <img src = “4.png” alt=”…” style = “width: 100%;”>           </div>          </div>         </div>        </li>        <li class = “nav-item dropdown megamenu-li”>         <a class = “nav-link dropdown-toggle” href=”../” id = “dropdown02” data-toggle = “dropdown” aria-haspopup = “true” aria-expanded = “false”> Mega Menu 2 </a>         <div class = “dropdown-menu megamenu” aria-labelledby = “dropdown02”>          <div class = “row”>           <div class = “col-sm-6 col-lg-4”>            <h5> Image Slider </h5>            <div id = “carouselExampleControls” class = “carousel slide” data-ride = “carousel”>             <div class = “carousel-inner”>              <div class = “carousel-item active”>               <img class = “d-block w-100” src = “3.png” alt = “…”>              </div>              <div class = “carousel-item”>               <img class = “d-block w-100” src = “4.png” alt = “…”>              </div>              <div class = “carousel-item”>               <img class = “d-block w-100” src = “3.png” alt = “…”>              </div>             </div>            </div>           </div>           <div class=”col-sm-6 col-lg-3″>            <h5>Links</h5>            <a class=”dropdown-item” href=”#”>Another action</a>                     </div>           <div class=”col-sm-6 col-lg-5″>            <h5> Paragraph </h5>            <p> Lorem, ipsum dolor sit amet adipisicing elit. </p>           </div>          </div>         </div>        </li>       </ul>      </div>     </nav>    </div>   </div>  </div>  <script>  $(document).ready(function() {  $(“.megamenu”).on(“click”, function(e) {  e.stopPropagation();  });  });  </script>  </body>  </html>  

Explanation:

In the above example, we have created an example of a Bootstrap 4 mega dropdown menu. In this, we customize the navbar to have a full-width dropdown menu for certain nav items.

Output:

Following is the output of this example.

Bootstrap 4 Mega Dropdown Menu

Next TopicBootstrap 4 Checkout Form

bootstrap 4 bootstrap 4 Buttons bootstrap 4 Dropdown bootstrap 4 Forms bootstrap 4 Images bootstrap 4 Jumbotron bootstrap 4 Layout bootstrap 4 Lists bootstrap 4 MCQ bootstrap 4 Navs bootstrap 4 Progress Bars bootstrap 4 Spinners bootstrap 4 Tables bootstrap 4 Tooltip bootstrap 4 tutorial what is bootstrap4

Bootstrap 4 Mega Dropdown Menu

Bootstrap 4 Mega Dropdown Menu

Example 1:

AutoCAD LT Download

Boostrap3 sticky header

You may also like