Lightweight and Pure CSS Mega Menu For Bootstrap 4/3 - Yamm
| File Size: | 76.5 KB |
|---|---|
| Views Total: | 10922 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight and pure CSS mega menu solution which allows you to add almost any components into your Bootstrap 4 navbar.
Bootstrap 3 framework is supported as well. You can download the Bootstrap 3 Version here.
How to use it:
1. Load the core stylesheet yamm.css into your Bootstrap project which has jQuery and bootstrap.min.js installed.
<link href="yamm/yamm.css" rel="stylesheet">
2. Create a mega menu from the regular Bootstrap navbar component. Possible CSS classes:
- .yamm: required
- .yamm-content: wrap content with padding
- .yamm-fw: make dropdown menu full width
<nav class="yamm navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container w-100"><a class="navbar-brand" href="#">Yamm Megamenu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse" id="navbar-collapse-1">
<ul class="navbar-nav mr-auto">
<!-- Classic list-->
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">List</a>
<div class="dropdown-menu p-0">
<!-- Content container to add padding-->
<div class="yamm-content">
<div class="row">
<ul class="col-sm-3 list-unstyled">
<li>
<p><strong>Section Title</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-3 list-unstyled">
<li>
<p><strong>Links Title</strong></p>
</li>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
</ul>
<ul class="col-sm-3 list-unstyled">
<li>
<p><strong>Section Title</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-3 list-unstyled">
<li>
<p><strong>Section Title</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>
<ul>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
<li><a href="#"> Link Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Accordion demo-->
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Accordion</a>
<div class="dropdown-menu p-0">
<div class="yamm-content">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">Collapsible Group Item #1</button>
</h2>
</div>
<div class="collapse show" id="collapseOne" data-parent="#accordionExample">
<div class="card-body">
<div class="card-text">Ut consectetur ullamcorper purus a rutrum.<br>Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna.</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">Collapsible Group Item #2</button>
</h2>
</div>
<div class="collapse" id="collapseTwo" data-parent="#accordionExample">
<div class="card-body">
<div class="card-text">Ut consectetur ullamcorper purus a rutrum.<br>Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna.</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">Collapsible Group Item #3</button>
</h2>
</div>
<div class="collapse" id="collapseThree" data-parent="#accordionExample">
<div class="card-body">
<div class="card-text">Ut consectetur ullamcorper purus a rutrum.<br>Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Classic dropdown-->
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Classic</a>
<div class="dropdown-menu" role="menu"><a class="dropdown-item" tabindex="-1" href="#"> Action</a><a class="dropdown-item" tabindex="-1" href="#"> Another action</a><a class="dropdown-item" tabindex="-1" href="#"> Something else here</a>
<div class="dropdown-divider"></div><a class="dropdown-item" tabindex="-1" href="#"> Separated link</a>
</div>
</li>
<!-- Pictures-->
<li class="nav-item dropdown yamm-fw"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pictures</a>
<div class="dropdown-menu p-0">
<div class="yamm-content">
<div class="row">
<div class="col-xs-6 col-sm-2"><a href="#"><img class="img-thumbnail img-fluid" alt="150x190" src="demo/img/190.jpg"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#"><img class="img-thumbnail img-fluid" alt="150x190" src="demo/img/190.jpg"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#"><img class="img-thumbnail img-fluid" alt="150x190" src="demo/img/190.jpg"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#"><img class="img-thumbnail img-fluid" alt="150x190" src="demo/img/190.jpg"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#"><img class="img-thumbnail img-fluid" alt="150x190" src="demo/img/190.jpg"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#"><img class="img-thumbnail img-fluid" alt="150x190" src="demo/img/190.jpg"></a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
3. Sometimes you need to revent unexpected menu close when using some components.
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
Changelog:
2019-12-10
- Updated for Bootstrap 4
This awesome jQuery plugin is developed by geedmo. For more Advanced Usages, please check the demo page or visit the official website.
