Horizontal Megamenu with Sidebar Tools
Avenger comes built-in with a 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.
Fixed width menu with Navbar Default style
Markup
- Reuse navbar markup and add class
.yamm
at the top. - Then add your markup into the
.dropdown-menu
- Optionally, use .
yamm-content
to wrap content with padding. - Optionally, add a fixed width to
ul.dropdown-menu
usingstyle
<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"> ... </div> </div> </li> </ul> </li> </ul> ... </nav>
Full width menu with Navbar Inverse style
Width
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.
<nav class="navbar yamm navbar-default " role="navigation"> ... <ul class="nav navbar-nav"> <li class="dropdown yamm-fw"> ... </li> </ul> ... </nav>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, asperiores, minima nostrum non ratione quibusdam minus facere neque sit quos quidem dolore deserunt officia harum iusto reprehenderit nesciunt totam nulla? Fugit excepturi veniam quos iste sint ad ipsum natus deleniti perferendis voluptatem. Harum, natus consequuntur dolorum quae repudiandae necessitatibus ducimus molestiae cumque. Explicabo, cumque, eveniet, expedita iure earum reprehenderit vel non doloremque repellat sunt minima eum reiciendis quia quaerat fuga similique provident incidunt accusantium voluptatem ex. Quaerat, laboriosam, doloremque, ipsum, voluptas soluta dolores ea tempora voluptatibus minus reprehenderit laborum vitae dolorum eos blanditiis nulla itaque atque. Explicabo, iure veritatis id.