Having a complex menu in a website has proven to be a challenge for any web designer. Reason for that is how such complicated menu is performing on mobile devices. The simple slide/toggle menus are not very effective as they are a bit frustrating to deal with on a mobile phone for example.
Zurb Foundation grid framework has a very good solution for a mobile device menu, which is using slide transition effects for submenus and it is not difficult to implement. But what if you do not want to use it on your website and personally speaking it is a bit time-consuming to implement it on a website that is already built.
Mmenu is a plugin (jQuery and WordPress versions available) that will allow you to add a native app menu experience with sliding submenus.
You can choose to have the Mmenu on smartphones, tablets or desktops by choosing your own breakpoint by specifying a media query in the CSS.
Here are some of the features making Mmenu worth considering for your website.
- Easy and powerful
- Fixed header, search field and subitem counter make it easy to navigate
- Four positions available
- Navigation selection – back button, breadcrumbs, vertical dropdowns
- Add buttons to the header or footer
- Add photo, logo or full width background image
Implementing Mmenu is quite easy. Here are the steps you need to follow to create a basic Mmenu.
Getting started
If you can, it is recommended to use the HTML5 doctype.
<!DOCTYPE html> <html>
Now include jQuery and the jQuery.mmenu .js and .css files in the HEAD of your webpage.
<head> <script src="path/to/jquery.js" type="text/javascript"></script> <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script> <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
If a basic menu is all you need, these files will probably be all you need to include. If you want to use some of the extensions or add-ons, but don’t know what files to include, you can simply include the “all” .js and .css files.
<head> <script src="path/to/jquery.js" type="text/javascript"></script> <script src="path/to/jquery.mmenu.min.all.js" type="text/javascript"></script> <link href="path/to/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />
The HTML
Setup the HTML for your menu like you normally would, using UL, LI and A elements.
<ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a></li> <li><a href="/contact/">Contact</a></li> </ul>
Make sure to wrap the text in either an A or a SPAN element.
Have a look at the tips and tricks for some useful information about how to setup your webpage.
Wrap it in a node
Wrap the entire UL in a node (most commonly a NAV element) and give that node an ID.
<nav id="my-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a></li> <li><a href="/contact/">Contact</a></li> </ul> </nav>
Submenus
You can create a submenu by simply putting another UL in a LI.
<nav id="my-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a> <ul> <li><a href="/about/history/">History</a></li> <li><a href="/about/team/">The team</a></li> <li><a href="/about/address/">Our address</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </nav>
The page
You probably don’t need to make any changes to the HTML of your page.
But if you can, please wrap all markup in only one DIV.
<body> <div> <!-- the wrapper --> <div id="my-header"> ... </div> <div id="my-content"> ... </div> <div id="my-footer"> ... </div> </div> </body>
This DIV is best off without a (min-/max-)width and height, padding, border and margin.
If you’re using some other element than a DIV (for example a SECTION) you must specify this in the offCanvas.pageNodetype option in the configuration object.
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu({
// options
}, {
// configuration
offCanvas: {
pageNodetype: "section"
}
});
});
</script>
Styling it
By default all ULs will automatically be styled like a listview. If you don’t want an UL to be styled like a listview, add the class “mm-nolistview” to it.
<nav id="my-menu"> <div> <p>Here's an UL that won't be styled like an app-menu:</p> <ul class="mm-nolistview"> <li><a href="/about/history/">History</a></li> <li><a href="/about/team/">The team</a></li> <li><a href="/about/address/">Our address</a></li> </ul> </div> </nav>
Open and close submenus
You don’t need to worry about any links for opening and closing submenus, the plugin automatically adds them for you.
Vertical submenus
By default, all submenus will come sliding in from the right. Set the slidingSubmenus option to false to prevent this behavior. Or add the class “Vertical” to a single submenu if you want it to expand below its parent.
<nav id="my-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About us</a> <ul class="Vertical"> <li><a href="/about/history/">History</a></li> <li><a href="/about/team/">The team</a></li> <li><a href="/about/address/">Our address</a></li> </ul> </li> <li><a href="/contact/">Contact</a></li> </ul> </nav>
If you’re using a different classname (for example “expand”), you must specify this in the classNames.vertical option in the configuration object.
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu({
// options
}, {
// configuration
classNames: {
vertical: "expand"
}
});
});
</script>
For more information about Mmenu implementation, styling and adding extensions or addons, visit Mmenu docs.