Off-canvas introduction

The "offCanvas" add-on enables the menu to be opened as an off-canvas menu. It is included in the jquery.mmenu .js and .css files and turned on by default. Have a look at the on- and off-canvas page for more information.

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Create an on-canvas menu.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Options for the "offCanvas" add-on

Option Default value Datatype Description
1 This option requires the "positioning" extension to be included.
offCanvas A map of options or false for disabling the offCanvas add-on.
{
blockUI true Boolean Whether or not to block the user from using the page while the menu is opened.
If set to "modal", clicking outside the menu does not close it.
moveBackground true Boolean Whether or not the page should inherit the background of the body when the menu opens.
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".
}

Configuration for the "offCanvas" add-on

Option Default value Datatype Description
offCanvas
{
menuInsertMethod "prependTo" String How to insert the menu to the DOM.
Can be any of the jQuery DOM insertion methods such as "prependTo" or "insertAfter".
menuInsertSelector "body" String jQuery selector for the node the menu should be inserted in.
pageNodetype "div" String The node-type of the page.
pageSelector "body > " + offCanvas.pageNodetype String jQuery selector for the page.
wrapPageIfNeeded true Boolean Whether or not multiple nodes targeted by the pageSelector should be wrapped in a single node.
}

API methods for the "offCanvas" add-on

Method( arguments ) Default value Datatype Description
close Trigger this method to close the menu.
open Trigger this method to open the menu.
setPage Trigger this method to tell the plugin what HTML node it should consider to be the "page".
(
$page jQuery object The HTML node for the "page".
)

API hooks for the "offCanvas" add-on

close:before
Invoked before anything when trying to close the menu.
close:start
Invoked before the menu starts closing.
close:finish
Invoked after the menu finishes closing.
close:after
Invoked after everything when trying to close the menu.
open:before
Invoked before anything when trying to open the menu.
open:start
Invoked before the menu starts opening.
open:finish
Invoked after the menu finishes opening.
open:after
Invoked after everything when trying to open the menu.
setPage:before
Invoked before setting the page node.
setPage:after
Invoked after setting the page node.

SCSS variables for the "offCanvas" add-on

Variable Default value Datatype Description
$mm_menuHeight 0.8 Number The height of the menu as a percentage (only applies when opening the menu from the top or bottom). From 0.0 (fully hidden) to 1.0 (fully opened).
$mm_menuMinHeight 140px CSS value The minimum height of the menu, in pixels.
$mm_menuMaxHeight 880px CSS value The maximum height of the menu, in pixels.
$mm_menuWidth 0.8 Number The width of the menu as a percentage. From 0.0 (fully hidden) to 1.0 (fully opened).
$mm_menuMinWidth 140px CSS value The minimum width of the menu, in pixels.
$mm_menuMaxWidth 440px CSS value The maximum width of the menu, in pixels.

Next add-on:
Screen reader