Creating Sliding Menu With Ease Using jQuery.mmenu

By . in Web Design. Updated on .

Creating creatively different menu sometimes is pretty hard when you have no any good idea or inspiration. But this kind of matter can be fixed by searching other inspirational menu design or with the help of tools. In this matter, jQuery.Mmenu comes in as a pretty handy tool.

jQuery.Mmenu is an easy-to-use jQuery plugin for creating mobile app sliding navigation menu in your website. This slick creative menu will bring a nicer and neatere user experience.

Getting Started

To get started with jQuery.Mmenu, head over to the download page and the plugin will be downloaded automatically. In this post, we will try to build a basic menu.

Just like other jQuery plugins, to use this you have to include the required dependencies to your site. Those are jQuery, jquery.mmenu.js and jquery.mmenu.css. The snippet is as follows:

<head>
..
   <link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

And that should be enough for creating a basic menu with all functionalities and styling. For more advanced and extra features, you need to include additional JS and CSS file.

Creating A Menu

Let’s create the basic menu as you usually create it with the nav, ul, li and a elements. In this demo, we’ll create a horizontal menu that has three sub-menus and also three sub-sub-menus, like so.

<nav id="menu">
   <ul>
     <li class="Selected">
         <a href="demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

In the above menu, we have included the nav with a menu id which will be used as the jQuery.mmenu function reference. Then call the plugin with the javascript function and include the id like so.

<script type="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

In the LI tag, you can see a class named Selected, this class is useful to make the default selected menu upon initialization. You also may add your own class (for example “active”), but make sure to include it in the configuration section, like so.

<script type="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

This plugin has automatically added the sub-menu closing and opening links, so we don’t need to create them. Our menu should look like this.

menu result

Conclusion

jQuery.mmenu offers you a great solution to create different menus as easy as possible. You can even create other interactive elements with this plugin, for example, you can create a sliding tooltip and notification bar for mobile site.

jQuery.Mmenu can be customized for advance usage as well. For example, you can create a mobile-like contact list in your site by combining its theme sextension, addon (labels, counters, header, dragOpen and searchfield) and positioning.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail