mmlight tutorial

In this tutorial, we'll create a lightweigh mobile menu using the mmenu light plugin. Just follow the tutorial step by step and you'll have it up and running in no time.

Lets start with creating a .html file and add some basic markup for a header and the content. For this tutorial we'll assume you already have a stylesheet (called my-styles.css) for styling this markup.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header"></div>
            <div id="my-content">
                <h1>Page title</h1>
                <p>Some content.</p>
            </div>
        </div>
    </body>
</html>

Next, include the mmenu .js and .css files. Most commonly, .css files are located in the <head /> and .js files are located before the closing <body />.

<!DOCTYPE html>
<html>
    <head>
        ...
        <link href="path/to/mmenu-light.css" rel="stylesheet" />
    </head>
    <body>
        ...
        <script src="path/to/mmenu-light.js"></script>
    </body>
</html>

The menu

Now that we've set up our .html file and added the markup for a header and the content, lets add a menu. For this tutorial, we'll add our menu in the header.

It is not important where in the markup the menu is located, just make sure none its ancestor elements has a transform CSS property applied to it and try to avoid a z-index conflict.

With the mmenu light plugin, the menu needs to be constructed of <nav />, <ul />, <li /> and <a /> (or <span />) elements. You can add a submenus simply by adding an <ul /> (with in it <li /> and <a /> elements) in a <li />.

<body>
    <div id="my-page">
        <div id="my-header">
            <nav id="my-menu">
                <ul>
                    <li class="Selected"><a href="/">Home</a></li>
                    <li><a href="/about/">About us</a>
                        <ul>
                            <li><a href="/about/history/">History</a></li>
                            <li"><a href="/about/team/">The team</a></li>
                            <li><a href="/about/address/">Our address</a></li>
                        </ul>
                    </li>
                    <li><a href="/contact/">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div id="my-content">
            ...
        </div>
    </div>
</body>

Note the ID "my-menu" on the <nav />, we'll be using it later on to target the menu when firing the plugin.

Open submenus

The plugin assumes every <a /> in the menu should be clickable, it therefor adds the anchor to open a submenu next to the <a />. If our website has no main page for the "about" section, we could replace the <a href="/about/" /> with a <span />. This way the anchor to open the submenu will fill up the entire <li />.

<nav id="my-menu">
    <ul>
        ...
        <li><span>About us</span>
            <ul>
                ...
            </ul>
        </li>
        ...
    </ul>
</nav>

Fire the plugin

Now that we have created a .html file, included all needed .css and .js files and set up the markup for the page and the menu, we can fire the plugin. Most commonly, you'd write the JavaScript in a separate .js file, but for this tutorial we'll write it in an inline <script />.

First, we create an instance of the mmenu light plugin and provide it with the menu element. Remember the ID "my-menu" on the <nav />? We're now using it to target the menu.

<script>
    const menu = mmlight( document.querySelector( "#my-menu" ) );
</script>

Next, we tell the plugin when the menu should be enabled by specifying a media query in the create method. For this tutorial, we want the menu to only appear and function as an off-canvas mobile menu when the width of the window is less than 600 pixels.

<script>
    menu.create( "(max-width: 600px)" );
</script>

Last, we tell the plugin what <li /> should appear "selected" by specifying a classname in the init method. For this tutorial, we're using "Selected". The plugin will initially show the submenu that contains the last <li class="Selected" /> it finds in the menu.

<script>
    menu.init( "Selected" );
</script>

Open the menu

Now that we've set up our menu, we need to be able to open it by clicking an anchor. So lets add an <a /> in our header and bind an event listener to it for opening the menu.

<body>
    <div id="my-page">
        <div id="my-header">
            <a href="#my-menu">Open the menu</a>
            <nav id="my-menu">
                ...
            </nav>
        </div>
        ...
    </div>
    ...
    <script>
        document.addEventListener(
            "DOMContentLoaded", () => {
                ...
                document.querySelector( "a[href='#my-menu']" )
                    .addEventListener( "click", ( event ) => {
                        menu.open();

                        //    Don't forget to "preventDefault" and to "stopPropagation".
                        event.preventDefault();
                        event.stopPropagation();
                    });
            }
        );
    </script>
</body>

Close the menu

By default, the menu automatically closes after clicking on the still visible part of the page. Invoke the close method to close the menu manually.

<script>
    menu.close();
</script>

For a complete overview of all methods, check out the the documentation.

Recap

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mmenu-light.css" rel="stylesheet" />
    </head>
    <body>
        <div id="my-page">
            <div id="my-header">
                <a href="#my-menu">Open the menu</a>
                <nav id="my-menu">
                    <ul>
                        <li class="Selected"><a href="/">Home</a></li>
                        <li><span>About us</span>
                            <ul>
                                <li><a href="/about/history/">History</a></li>
                                <li><a href="/about/team/">The team</a></li>
                                <li><a href="/about/address/">Our address</a></li>
                            </ul>
                        </li>
                        <li><a href="/contact/">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="my-content">
                <h1>The title</h1>
                <p>Some content.</p>
            </div>
        </div>

        <script src="path/to/mmenu-light.js"></script>
        <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();

                            //    Don't forget to "preventDefault" and to "stopPropagation".
                            evnt.preventDefault();
                            evnt.stopPropagation();
                        });
                }
            );
        </script>
    </body>
</html>

Learn more

If you'd like to learn more about customizing your menu, have a look at the documentation.
Documentation