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.
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:
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
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
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.
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.
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.