Open the menu Skip to main content

Off-canvas

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( "#menu", {
                offCanvas: {
                    // off-canvas options
                }
            }, {
                offCanvas: {
                    // off-canvas configuration
                }
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Options for the "offCanvas" add-on

Option Datatype Default value Description
offCanvas
{
use boolean true Whether or not to enable the offCanvas add-on.
position String "left" The position of the menu.
Possible values: "left", "left-front", "right", "right-front" "top" and "bottom".
}

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.
}
screenReader
{
closeMenu String "Close menu" Screenreader text for buttons that close the menu.
openMenu String "Open menu" Screenreader text for buttons that open the menu.
}
}

CSS variables for the "offCanvas" add-on

Variables Datatype Default value Description
--mm-size percentage 80% The width or height of the menu.
--mm-min-size pixels 240px The minimum width or height of the menu.
--mm-max-size pixels 440px The maximum width or height of the menu.

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 closing the menu.
close:after
Invoked after everything when closing the menu.
open:before
Invoked before anything when openning the menu.
open:after
Invoked after everything when opening the menu.
setPage:before
Invoked before setting the page element.
setPage:after
Invoked after setting the page element.