Documentation introduction

Getting started

This documentation page assumes you have some knowledge of HTML, CSS and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

If you're new to using the mmenu light plugin, please grab a copy of the mmenu light plugin and try the tutorial.

Options

The mmenu light plugin provides a set of options for customizing your menu. The default values can be overridden by passing new values to the method.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const node = document.querySelector( "#my-menu" );
            const menu = new MmenuLight( node, {
                title: "My menu"
                theme: "dark"
            });
        }
    );
</script>

Available options

Option Datatype Default value Description
selected String "Selected" Classname to use for finding the selected <li />.
slidingSubmenus Boolean true Wether or not to use sliding submenus (forced to be false in IE11).
title String "Menu" The title above the main panel.
For subpanels the text in its parent menu item is used.
theme String "light" Color scheme to use. Possible values: "light" or "dark"

Styling

It's pretty easy change the styling for the mmenu light plugin, just override some of the CSS values and variables.

<style>
    .mm {
        background: #ffe;
        color: 330;
        --mm-max-width: 500px;
        --mm-item-height: 46px;
    }
</style>

Available CSS values and variables

Variables Datatype Default value Description
Values
background-color Color #f3f3f3 Background-color for the menu.
color Color #444 Color for the text and borders in the menu.
top CSS value 0 Position relative to the top of the page.
bottom CSS value 0 Position relative to the bottom of the page.
Variables
--mm-width CSS value 80% Width for the menu.
--mm-min-width CSS value 200px Minimal width for the menu.
--mm-max-width CSS value 440px Maximum width for the menu.
--mm-item-height CSS value 50px Height for menu items.
--mm-item-indent CSS value 20px Indent for menu items.
--mm-line-height CSS value 24px Line-height for text in the menu.

API

After the plugin is invoked, an API is available for the menu. With this API, you can invoke the plugin methods to control the plugin manually.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const node = document.querySelector( "#my-menu" );
            const menu = new MmenuLight( node );

            menu.enable( "(max-width: 600px)" );
            menu.offcanvas();

            document.querySelector( 'a[href="#my-menu"]' )
                .addEventListener( 'click', ( evnt ) => {
                    menu.open();

                    evnt.preventDefault();
                    evnt.stopPropagation();
                });
        }
    );
</script>

Available API methods

Method( arguments ) Datatype Default value Description
enable Invoke this method to enable the menu for the specified media query.
(
mediaQuery String "all" When this media query matches, the menu is fully styled and functional. When it doesn't, the menu remains untouched.
)
disable Invoke this method to disable the menu.
offcanvas Invoke this method to add off-canvas behavior for the menu. Otherwise, the menu will always be visible in its parent.
(
position String "left" Where on the page to position the menu. Posible values: "left" and "right"
move Boolean true Whether or not to move the menu to the <body />.
blockPage Boolean | String 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.
)
open Invoke this method to open the menu (use in combination with the offcanvas method). When the menu opens, the mm:open (custom) event is dispatched.
close Invoke this method to close the menu (use in combination with the offcanvas method). When the menu closes, the mm:close (custom) event is dispatched.
openPanel Invoke this method to open a panel in the menu.
(
panel HTMLElement null Panel to open.
)