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 2kb (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 menu = mmlight( document.querySelector( "#my-menu" ) );
            menu.create( "(max-width: 600px)" );
            menu.init( "Selected" );

            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

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 menu = mmlight( document.querySelector( "#my-menu" ) );
            menu.create( "(max-width: 600px)" );
            menu.init( "Selected" );

            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
create Invoke this method to create the menu.
(
mediaQuery string "all" When this media query matches, the menu is fully styled and functional. When it doesn't, the menu remains untouched.
)
destroy Invoke this method to destroy the menu.
init Invoke this method to find the currently opened panel in the menu.
(
selector string null Selector for the currently selected listitem.
)
open Invoke this method to open the menu.
close Invoke this method to close the menu.
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;
      max-width: 500px;
      --mm-color: rgba(0,0,0,0.6);
   }
</style>

Available CSS values and variables

Variables Datatype Default value Description
Values
background-color Color #f3f3f3 Background-color for the menu.
border-color Color rgba( 0, 0, 0, 0.1 ) Color for the menu item borders.
width CSS value 80% Width for the menu.
min-width CSS value 200px Minimal width for the menu.
max-width CSS value 440px Maximum width for 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-color Color rgba(0,0,0,0.8) Color for text in the menu.
--mm-item-height CSS value 50px Height for menu items.
--mm-item-indent CSS value 20px Indent for menu items.
--mm-arrow-color Color rgba(0,0,0,0.3) Color for the arrows.