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 mmenu.js 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 />.

Remember the ID "my-menu" on the <nav />? We're now using it to target the menu.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu" );
        }
    );
</script>

Options

The mmenu.js plugin provides a set of options for customizing your menu. The default option values can be overridden by passing new values to the method. If the options apply to all menus on your webpage, you could also override it in the plugin defaults.

For example, lets set the slidingSubmenus option to false so all submenus will expand below their parent instead of come sliding in from the right.

Override instance options
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                slidingSubmenus: false
            });
        }
    );
</script>
Override plugin defaults
<script>
    Mmenu.options.slidingSubmenus = false;

    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu" );
        }
    );
</script>

For a complete overview of all options, check out the options and add-ons pages.

Extensions

The mmenu.js plugin comes with a set of extensions to extend the look and feel of your menu. To enable an extension, add its name to the extensions option.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                extensions: ["theme-dark"]
            });
        }
    );
</script>

For a complete overview of all extensions, check out the extensions pages.

Open and close the menu

The plugin automatically binds a click event that opens the menu to every <a /> that targets the menu in its href attribute. So lets add one in the header.

<body>
    <div id="my-page">
        <div id="my-header">
            <a href="#my-menu">Open the menu</a>
            <nav id="my-menu">
                ...
            </nav>
        </div>
        <div id="my-content">
            ...
        </div>
    </div>
</body>

Open the menu manually

If you're not using an <a /> but some other element, for example a <button />, or if you need to open the menu programatically, you can invoke the open method from the API to open the menu manually.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new Mmenu( "#my-menu" );
            const api = menu.API;

            document.querySelctor( "#my-open-button" )
                .addEventListener(
                    "click", ( evnt ) => {
                        evnt.preventDefault();
                        api.open();
                    }
                );
        }
    );
</script>

For a complete overview of all methods, check out the API and add-ons pages.

Close the menu

By default, the menu automatically closes when clicking on the still visible part of the page. The plugin also automatically binds a click event that closes the menu to every <a /> that targets the "page" in its href attribute.

Remember the ID "my-page" on the <div />? We're now using it to target the "page".

<a href="#my-page">Close the menu</a>

Close the menu manually

If you're not using an <a /> but some other element, for example a <button />, or if you need to close the menu programatically, you can invoke the close method from the API to close the menu manually.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new Mmenu( "#my-menu" );
            const api = menu.API;

            document.querySelctor( "#my-close-button" )
                .addEventListener(
                    "click", ( evnt ) => {
                        evnt.preventDefault();
                        api.close();
                    }
                );
        }
    );
</script>

For a complete overview of all methods, check out the API and add-ons pages.

Next up:
Recap