YAMM3 – Build Megamenu For Bootstrap 3

By . Filed in Web Design

There are many usability advantages in using megamenu on a webpage. With megamenu, you can take full control over your menu. Almost all web elements can be assigned there. Some great companies have even applied megamenu into their website. Amazon and Mashable for example. Amazon have an image background in their menu and Mashable uses image thumbnails for a more attractive menu.

If you have been working with Bootstrap, now you can build a megamenu in a snap with this brand new library called Yamm from Geedmo.

Yamm3 (Yet Another Megamenu) is a CSS library to help you build a megamenu in Bootstrap 3 easily. The megamenu works for both responsive and fixed layouts. It covers almost all bootstrap elements to be included in the navbar like picture, accordion, list, grid, table, form and so on.

Basic Guide

Yamm3 uses lightweight and pure CSS. To get started with Yamm3, you only have to include the Yamm3 class you need into your standard navbar HTML markup.

Before working with Yamm3, the first step is to include the Yamm3 and Bootstrap stylesheet library into the head section as follows:

<head>
...
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-theme.min.css" rel="stylesheet">
   <link href="css/yamm.css" rel="stylesheet">
...
</head>

And don’t forget to also include the jQuery and Bootstrap library into your project, either in the head or body section, like so:

...
   <script src="js/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
...

Please note that we use Bootstrap 3 here and the minimum jQuery version required is version 1.9.0+. If you are still running on the previous Bootstrap version, we recommend following the guide of the previous Yamm version.

HTML Markup

In basic usage, to use Yamm3 firstly add .yamm class at the top of the navbar markup. Then, you can add your menu markup into the .dropdown-menu class. The following is a basic 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"> 
                    <!-- Your Menu Goes Here -->
				  </div>
			   </div>
           </li>
         </ul>
       </li>
     </ul>
...
</nav>

As seen there, you can also use .yamm-content as an option to wrap content with padding.

For example, let’s try to add an accordion menu inside our markup navbar. Replace the Your Menu Goes Here comment with the following code.

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion Group Item #1</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">This is collapsible menu.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion Group Item #2</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">This is collapsible menu.</div>
        </div>
    </div>
</div>

By calling the accordion id and using a panel-group class for grouping, you are able to create an accordion inside the navbar. And so our menu will look like the screenshot below:

There are plenty of other components you can add into the navbar. Self exploration of other components you can implement can be done if you download the Yamm3 complete archive and open the index.html file with your favourite code editor.

Javascript

There is an additional javascript code used for the prevention of an unexpected closed menu in some components like accordion, forms, etc. Just include the following code into your head or body section:

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

Conclusion

Yamm3 is another great third-party product to boost your Twitter Bootstrap’s development when building an attractive navbar. You just need a little effort in exploring all implementation components, as it lacks documentation support for creating various components menu.

Share your opinion with us in the comments section below.

Author:

Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.

Advertisement

Comments are closed. Contact Us.