Yamm Megamenu

Hello, Yamm!

This is Yet another megamenu for Bootstrap from Twitter. It uses the standard navbar markup and the fluid grid system classes from Bootstrap. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.
This project is currently hosted on Github.


View on Github» Download

Yamm for Bootstrap 3 ?

Markup

Reuse Bootstrap navbar markup and add class .yamm at the top.
Then add your markup into the .dropdown > li
Optionally use .yamm-content to add a padding for your content. Default padding used in demo 20px 30px 

<div class="yamm navbar">
  ...
  <ul class="nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Account
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li>
          <div class="yamm-content">
          ...
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Use class yamm-fullwidth applied to .dropdown to makes the menu always expand to the navbar width

Grid Examples

Layouts

Markup

Same as above and use the fluid grid system to ensure all row will correctly fit with the menu width.
Works better with fullwidth menus 

<div class="yamm navbar">
  ...
  <ul class="nav">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Account
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li>
          <div class="row-fluid">
            <div class="span4">...</div>
            <div class="span4">...</div>
            ...
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

More Examples

Misc

Anchors and Anchor buttons

Since Bootstrap on doesn't expect to have more than one anchor children under .dropdown > li, on low resolutions styles are overriden.

Redeclare your anchor styles under class .yamm-content to avoid touch classic dropdowns

Of course, a button.btn doesn't need this

A better way?

Build your Bootstrap with this version of responsive-navbar.less

.yamm .yamm-content a,
.yamm .yamm-content a:hover,
.yamm .yamm-content a:focus {
  background: transparent;
  font-weight: normal;      
}
.yamm .yamm-content a {
  color: #0088CC;
}
.yamm .yamm-content a:hover,
.yamm .yamm-content a:focus {
  color: #005580;
}

Javascript

This code will prevent unexpected menu close when using some components (like accordion)

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