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.

Most commonly a menu would 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 />.

It is not important where in the markup the menu is located, the mmenu.js plugin will move it (or a cloned version of it) to where it is needed. For this tutorial, we'll add our menu in the header.

<body>
    <div id="my-page">
        <div id="my-header">
            <nav id="my-menu">
                <ul>
                    <li><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.

Selected item

To make a <li /> appear "selected", add the classname "Selected" to it. The plugin will initially show the submenu that contains the last <li class="Selected" /> it finds in the menu.

<nav id="my-menu">
    <ul>
        <li class="Selected"><a href="/">Home</a></li>
        ...
    </ul>
</nav>

If you're using a different classname (for example "active"), you must specify this in the classNames.selected option in the configuration object. If this option applies to all menus on your webpage, you could also override it in the plugin defaults.

The below code example assumes you already have some knowledge of firing the mmenu.js plugin.

Override instance configuration

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                // options
            }, {
                // configuration
                classNames: {
                    selected: "active"
                }
            });
        }
    );
</script>

Override plugin defaults

<script>
    Mmenu.configs.classNames.selected = "active";

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

Open submenus

The plugin assumes every <a /> in a <li /> 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>

Vertical submenus

By default, submenus will come sliding in from the right (while the parent menu slides out to the left). You can set the slidingSubmenus option to false to prevent this behavior. Or add the classname "Vertical" to a single submenu if you want it to expand below its parent.

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

If you're using a different classname (for example "expand"), you must specify this in the classNames.vertical option in the configuration object. If this option applies to all menus on your webpage, you could also override it in the plugin defaults.

The below code example assumes you already have some knowledge of firing the mmenu.js plugin.

Override instance configuration

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                // options
            }, {
                // configuration
                classNames: {
                    vertical: "expand"
                }
            });
        }
    );
</script>

Override plugin defaults

<script>
    Mmenu.configs.classNames.vertical = "expand";

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

Next up:
Fire the plugin