This time I will share jQuery Plugin and tutorial about Lightweight and Pure CSS Mega Menu For Bootstrap 4/3 – Yamm, hope it will help you in programming stack.
| File Size: | 76.5 KB |
|---|---|
| Views Total: | 9516 |
| 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.
1 |
<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
001 |
<nav class="yamm navbar navbar-expand-lg navbar-light bg-light fixed-top"> |
002 |
<div class="container w-100"><a class="navbar-brand" href="#">Yamm Megamenu</a> |
003 |
<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> |
004 |
<div class="navbar-collapse collapse" id="navbar-collapse-1"> |
005 |
<ul class="navbar-nav mr-auto"> |
006 |
<!-- Classic list--> |
007 |
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">List</a> |
008 |
<div class="dropdown-menu p-0"> |
009 |
<!-- Content container to add padding--> |
010 |
<div class="yamm-content"> |
011 |
<div class="row"> |
012 |
<ul class="col-sm-3 list-unstyled"> |
013 |
<li> |
014 |
<p><strong>Section Title</strong></p> |
015 |
</li> |
016 |
<li>List Item</li> |
017 |
<li>List Item</li> |
018 |
<li>List Item</li> |
019 |
<li>List Item</li> |
020 |
<li>List Item</li> |
021 |
<li>List Item</li> |
022 |
</ul> |
023 |
<ul class="col-sm-3 list-unstyled"> |
024 |
<li> |
025 |
<p><strong>Links Title</strong></p> |
026 |
</li> |
027 |
<li><a href="#"> Link Item</a></li> |
028 |
<li><a href="#"> Link Item</a></li> |
029 |
<li><a href="#"> Link Item</a></li> |
030 |
<li><a href="#"> Link Item</a></li> |
031 |
<li><a href="#"> Link Item</a></li> |
032 |
<li><a href="#"> Link Item</a></li> |
033 |
</ul> |
034 |
<ul class="col-sm-3 list-unstyled"> |
035 |
<li> |
036 |
<p><strong>Section Title</strong></p> |
037 |
</li> |
038 |
<li>List Item</li> |
039 |
<li>List Item</li> |
040 |
<li>List Item</li> |
041 |
<li>List Item</li> |
042 |
<li>List Item</li> |
043 |
<li>List Item</li> |
044 |
</ul> |
045 |
<ul class="col-sm-3 list-unstyled"> |
046 |
<li> |
047 |
<p><strong>Section Title</strong></p> |
048 |
</li> |
049 |
<li>List Item</li> |
050 |
<li>List Item</li> |
051 |
<li> |
052 |
<ul> |
053 |
<li><a href="#"> Link Item</a></li> |
