Create Mega Menu For Your Website With Yamm3

By . in Web Design. Updated on .

There are many usability advantages in using a mega menu on a webpage. With mega menu, 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 mega menu 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 mega menu in Bootstrap 3 easily. The mega menu 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.

Working with Bootstrap Plugin: Modal Window

Working with Bootstrap Plugin: Modal Window

Bootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see... Read more

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:

accordion demo

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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail