Off-canvas introduction

The "offCanvas" add-on enables the menu to be opened as an off-canvas menu, it is turned on by default. To turn it off or to customize how it works, change the offCanvas options and configuration.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                offCanvas: {
                    // off-canvas options
                }
            }, {
                offCanvas: {
                    // off-canvas configuration
                }
            });
        }
    );
</script>

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.

  • Create an on-canvas menu.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "offCanvas" add-on

Option Datatype Default value Description
offCanvas A map of options or false for disabling the offCanvas add-on.
{
blockUI Boolean true 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 Boolean true Whether or not the page should inherit the background of the body when the menu opens.
}

Configuration for the "offCanvas" add-on

Option Datatype Default value Description
offCanvas
{
clone Boolean false Whether or not the menu should be cloned (and the original menu kept intact).
menu
{
insertMethod String "prepend" How to insert the menu to the DOM.
Possible values: "prepend" and "append".
insertSelector String "body" Query selector for the element the menu should be inserted in.
}
page
{
nodetype String "div" The node-type of the page.
selector String "body > " + offCanvas.page.nodetype Query selector for the page.
noSelector String[] [] Array of query selectors to exclude from the page.
}
}

API methods for the "offCanvas" add-on

Method( arguments ) Datatype Default value Description
close Invoke this method to close the menu.
open Invoke this method to open the menu.
setPage Invoke this method to tell the plugin what HTML element it should consider to be the "page".
(
page HTMLElement The HTML element 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 element.
setPage:after
Invoked after setting the page element.

SCSS variables for the "offCanvas" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_offcanvas Boolean true Whether or not to include CSS for the offCanvas add-on throughout the entire CSS framework.
$mm_include_offcanvas_blocker Boolean $mm_include_offcanvas Whether or not to include CSS for the page blocker throughout the entire CSS framework.
Sizes
$mm_menuHeight Number 0.8 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 CSS value 140px The minimum height of the menu, in pixels.
$mm_menuMaxHeight CSS value 880px The maximum height of the menu, in pixels.
$mm_menuWidth Number 0.8 The width of the menu as a percentage. From 0.0 (fully hidden) to 1.0 (fully opened).
$mm_menuMinWidth CSS value 240px The minimum width of the menu, in pixels.
$mm_menuMaxWidth CSS value 440px The maximum width of the menu, in pixels.

Next add-on:
Screen reader