mmenu light introduction

Small and lightweight

Mmenu light is the extremely small and lightweight alternative to the mmenu.js plugin. It creates a beautiful, intuitive off-canvas menu for mobile websites and web-apps, with the exact look and feel of the mmenu.js plugin.

No concessions

If you're in need of a simple and small mobile menu, but don't want to make any concessions to the mmenu look and feel, give the mmenu light plugin a try.

Really, really small

With a 4kb (minified) .js file and a 4kb (minified) .css file, you could not ask for a smaller disk footprint.

Example

Give it a go, click the hamburger icon to show the menu.

<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>

Download

The mmenu light plugin is licensed under the Creative Commons Attribution 4.0 International license. You can use it in all your personal, non-commercial and commercial projects.

NPM

Install with NPM:
npm install mmenu-light

GitHub

Download directly from the Github repository.

How to use

Check out this tutorial to learn how to use the mmenu light plugin.
mmenu light 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
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"
selected String "Selected" Classname to use for finding for the selected <li />.

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.
)

Customize

The mmenu light plugin is pretty easy to customize, 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.