Get new jQuery plugins just once a week

×

yamm3

September 23, 2015

Yamm 3 | A lightweight pure css megamenu for Bootstrap 3

Yamm 3 is a lightweight pure css plugin for megamenu for Bootstrap 3.

Created by geedmo

Download

Example

Yamm

megamenu

Yamm

This is Yet another megamenu for Bootstrap 3 from Twitter.

Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.

Demo

Markup

  1. Reuse navbar markup and add class .yamm at the top.

  2. Then add your markup into the .dropdown-menu

  3. Optionally use .yamm-content to wrap content with padding.

Example

<nav class="navbar yamm navbar-default " role="navigation">
    ...
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
            <ul class="dropdown-menu">
                <li>
                    <div class="yamm-content">
                    <div class="row"> 
                        ...
                </li>
            </ul>
        </li>
    </ul>
    ...
</nav>

Fullwidth

By default every mega-dropdown will take the content size so is possible to use add .yamm-fw to .dropdown to expand it fullwidth.
Yamm works better with fullwidth menus.

Example

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown yamm-fw">
             ...
       </li>
     </ul>
...
</nav>

Javascript

If necessary, this code will prevent unexpected menu close when using some components (like accordion, forms, etc)

$(document).on('click', '.yamm .dropdown-menu', function(e) {
   e.stopPropagation()
})

Install via composer

{ 
    "require": {
        "geedmo/yamm3": "dev-master"
    }
}

Install with bower

bower install yamm3 --save

AngularJS

Check it at hjzheng/angular-mega-menu

Compile

Run the following commands in the repository folder

To compile yamm with demo

License

yamm3

Related posts:

Pagescroller
Ascensor-js
Accessible Mega Menu

To install using Bower
bower install yamm3

Yamm

http://jquer.in/wp-content/uploads/2015/09/Yamm.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever