JS Tutorial
- Overview
- Documents
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.
Option will only work if either the associated or the "-all" JS and CSS files are included.
Option can also be a function that returns a valid value. Inside this function this refers to a logic HTML element
Besides the options-object, there is a second object used for overriding the default configuration options:
$("#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.
If the option is a String, it will be used as a jQuery selector.
5. CONFIGURATION
$("#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. | |||
