Mega Menu in Material Design Bootstraps
Install MDB CLI
1. first intall or
download and install Node.js
2. Open a terminal.
OR
Webpack Starter
Code of Mega Menu
you can customize your code or name menu name according to your requirement
<nav class="navbar navbar-expand-lg navbar-light bg-light">
data-mdb-target="#navbarExample2" aria-controls="navbarExample2" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
Container wrapper
<div class="container-fluid">Toggle button
<button class="navbar-toggler px-0" type="button" data-mdb-toggle="collapse"data-mdb-target="#navbarExample2" aria-controls="navbarExample2" aria-expanded="false"
aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
Collapsible wrapper
<div class="collapse navbar-collapse" id="navbarExample2">
Left links
<ul class="navbar-nav me-auto ps-lg-0" style="padding-left: 0.15rem"><li class="nav-item">
<a class="nav-link" href="#">thewebbazar.com</a>
</li>
Navbar dropdown
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Lorem ipsum
</p>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
Mega menu
</a>
Dropdown menu
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0;
border-top-right-radius: 0;
">
<div class="container">
<div class="row my-4">
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Lorem ipsum
</p>
<a href="" class="list-group-item list-group-item-action">Home</a>
<a href="" class="list-group-item list-group-item-action">About</a>
<a href="" class="list-group-item list-group-item-action">Servicesodio</a>
<a href="" class="list-group-item list-group-item-action">Technologies</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Explicabo voluptas
</p>
<a href="" class="list-group-item list-group-item-action">Web designing</a>t1</a>
<a href="" class="list-group-item list-group-item-action">Vuejs</a>
<a href="" class="list-group-item list-group-item-action">MDB</a>
<a href="" class="list-group-item list-group-item-action">reactjs</a>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-3 mb-md-0">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Technologies1
</p>
<a href="" class="list-group-item list-group-item-action">java</a>
<a href="" class="list-group-item list-group-item-action">python</a>
<a href="" class="list-group-item list-group-item-action">django </a>
<a href="" class="list-group-item list-group-item-action">AWS</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="list-group list-group-flush">
<p class="mb-0 list-group-item text-uppercase font-weight-bold">
Cras justo odio
</p>
<a href="" class="list-group-item list-group-item-action">J2EE</a>
<a href="" class="list-group-item list-group-item-action">Hbernate</a>
<a href="" class="list-group-item list-group-item-action">SpringMVC</a>
<a href="" class="list-group-item list-group-item-action">Software</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
<!-- Container wrapper -->
</nav>
No comments:
Please don't write any spam text or message