Lightweight and Pure CSS Mega Menu For Bootstrap 4/3 - Yamm

File Size: 76.5 KB
Views Total: 11049
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight and Pure CSS Mega Menu For Bootstrap 4/3 - Yamm

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.