Mmenu - creating slick, app look-alike sliding menus

Apr 10, 2014 in Mobile 5464 views

Download

Overview
Documents

User Rating: 4.1/5 ( 2 votes)

Your Rating:

A jQuery plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of javascript

Features:

Fully responsive CSS framework generated with SCSS.
Creates sliding panels as easy as menus.
Menu can be positioned at the top, right, bottom or left, at the back, front or next to the page.
Use sliding horizontal or expanding vertical submenus.
Optionally open the menu by dragging the page out of the viewport.
Plays nicely with jQuery Mobile.
Add headers, labels, counters and even a search field.
Completely themable by changing the background-color.
Works well on all major browsers.
Filled with options for customizing the menu.
Uses SCSS to easily create customized menus.

1. INCLUDE STYLES AND SCRIPTS

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

2. HTML

<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>
   </ul>
</nav>

3. JAVASCRIPT

$("#my-menu").mmenu({
   // options object
}, {
   // configuration object
   pageNodetype: "section"
});

4. OPTIONS

The jQuery.mmenu-plugin provides a few options for customizing your menu. The default option values can be overridden by passing new values to the method.

$("#nav").mmenu({
   // options:
   header      : true,
   searchfield : true,
   counters    : true
});

Option	Default value	Datatype	Description
	position 1	"left"	String	The position of the menu relative to the page. Possible values: "top", "right", "bottom" or "left". Note: As of version 4.2 the values "top" and "bottom" will only work in combination with zposition: "front".
	zposition 1	"back"	String	The z-position of the menu relative to the page. Possible values: "back", "front" or "next".
	slidingSubmenus	true	Boolean	Whether or not the submenus should come sliding in from the right. Iffalse, the submenus expand below their parent.
	moveBackground	true	Boolean	Whether or not the page should inherit the background of the body when the menu opens.
	classes	""	String	A collection of space-separated classnames to add to both the menu and the HTML.
	modal	false	Boolean	Whether or not the menu should be opened as a "modal". Basically, this means the user has no default way of closing the menu. You'll have to provide a close-button yourself.
	counters 1click to toggle the options		Object	A map of the "counters" options.
			Boolean	true or false for the "counters.add" and the "counters.update" options.
	dragOpen 1click to toggle the options		Object	A map of the "dragOpen" options. Note: This will only work if jQuery.hammer.js is included.
			Boolean	true or false for the "dragOpen.open" option.
	labels 1click to toggle the options		Object	A map of the "labels" options.
			Boolean	true or false for the "labels.collapse" option.
	header 1click to toggle the options		Object	A map of the "header" options.
			Boolean	true or false for the "header.add" and the "header.update" options.
	searchfield 1click to toggle the options		Object	A map of the "search" options.
			Boolean	true or false for the "searchfield.add" and the "searchfield.search" options.
	onClickclick to toggle the options		Object	A map of the "onClick" options.

Option will only work if either the associated or the "-all" JS and CSS files are included.
If the option is a String, it will be used as a jQuery selector.

Option can also be a function that returns a valid value. Inside this function this refers to a logic HTML element

5. CONFIGURATION

Besides the options-object, there is a second object used for overriding the default configuration options:

$("#nav").mmenu({
   // options go here
}, {
   // configuration:
   selectedClass  : "Selected",
   labelClass     : "Label",
   panelClass     : "Panel",
});

Option	Default value	Datatype	Description
clone	false	Boolean	Whether or not to clone the menu before prepending it to the BODY. Iftrue, the ID on the menu and every ID inside it will be prepended with "mm-" to prevent using double IDs.
panelClass	"Panel"	String	The classname on an element (for example a DIV) that should be considered to be a panel. Only applies if the "isMenu" option is set tofalse.
listClass	"List"	String	The classname on an UL that should be styled as an app-like list. Automatically applied to all ULs if the "isMenu" option is set to true.
selectedClass	"Selected"	String	The classname on the LI that should be displayed as selected.
labelClass	"Label"	String	The classname on a LI that should be displayed as a label.
counterClass	"Counter"	String	The classname on an EM that should be displayed as a counter. Only applies if the counters are not added automatically.
pageNodetype	"div"	String	The node-type of the page.
panelNodetype	"div, ul, ol"	String	The node-type of panels.
pageSelector	"body > " + pageNodetype	String	jQuery selector for the page.
menuWrapperSelector	"body"	String	jQuery selector for the node the menu should be injected in.
menuInjectMethod	"prepend"	String	How to inject the menu to the DOM. Possible values: "prepend" or "append".
transitionDuration 1	400	Number	The number of milliseconds used in the CSS transitions.
dragOpen 1click to toggle the configuration options		Object	A map of the "dragOpen" configuration options.
labelsclick to toggle the configuration options		Object	A map of the "labels" configuration options.
headerclick to toggle the configuration options		Object	A map of the "header" configuration options.

Configuration should match the associated CSS values.

6. EVENTS

After the plugin has been fired, a series of custom events are available for the menu.

The open and close events come in an infinitive, a participle and a past participle form. The infinitive (e.g. open) can be triggered for controlling the menu manually, the participle (e.g.opening) is triggered when the action is actually executed and the past participle (e.g.opened) is triggered on the completion of the action.

All custom events are bound to the .mm namespace, so triggering (or binding a new function to) an event would best be done like this:

$("#nav")
   .mmenu()
   .trigger( "open.mm" )
   .on(
      "opened.mm",
      function()
      {
         alert( "The menu has just been opened." );
      }
   );

Events for the menu (the <NAV>)

Event( arguments )	Default value	Datatype	Description
open			Trigger this event to manually open the menu.
opening			Triggered when the menu is opening.
opened			Triggered when the menu is finished opening.
close			Trigger this event to manually close the menu.
closing			Triggered when the menu is closing.
closed			Triggered when the menu is finished closing.
setPage( $page )click to toggle the arguments			Trigger this event to manually tell the plugin what node it should consider to be the "page".

Events for the submenus (the <UL>s)

Event( arguments )	Default value	Datatype	Description
open			Trigger this event to manually open the submenu.
close			Trigger this event to manually close the submenu.
toggle			Trigger this event to toggle the submenu between being opened and closed.

Events for the menu items (the <LI>s)

	Event( arguments )	Default value	Datatype	Description
	setSelected( selected )click to toggle the arguments			Trigger this event to manually set or unset it to be visibly "selected".

Events for the searchfield

Event( arguments )	Default value	Datatype	Description
search( query )click to toggle the arguments			Trigger this event to manually perform a search action on the menu.
reset			Trigger this event to manually reset the input field.

JS Tutorial