Dynamic content - mmenu.js tutorial

Introduction

In this tutorial, we'll add a new menu item (<li>) and a new submenu (<ul>) in an already created menu. Just follow the tutorial step by step and you'll have it up and running in no time.

Setup the menu

Lets start with creating a .html file and add the markup for the page and the menu. If you need help with this part, please read the off-canvas menu tutorial first.

<nav id="menu">
    <ul id="list">
        <li><a href="/">Home</a></li>
        <li id="item"><a href="/about/">About us</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</nav>
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#menu" );
        }
    );
</script>

Note the ID on the <ul> and <li>, we'll be using them later on.

Add a listitem

To add a new listitem (<li>), we first need to find the listview (<ul>) we want to add it to. The plugin wrapped it in a <div> and transfered its ID to this <div>, therefor we need to find #list .mm-listview.

<script>
    const listview = document.querySelector( "#list .mm-listview" );
</script>

Next, lets create a new <li> and add an <a> to it.

<script>
    const listitem = document.createElement( "li" );
    listitem.innerHTML = `<a href="/work">Our work</a>`;
</script>

Now all we need to do, is add the newly created <li> to the listview, the plugin automatically picks up on this change and will do the rest for us.

<script>
    listview.append( listitem );
</script>

Add a submenu

Adding a submenu (<ul>) is no different from adding a listitem. Again, we first need to find the listitem (<li>) we want to add it to.

<script>
    const listitem = document.querySelector( "#item" );
</script>

Next, lets create a new <ul> and add some listitems to it.

<script>
    const listview = document.createElement( "ul" );
    listview.innerHTML = `
        <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>`;
</script>

Now all we need to do, is add the newly created <ul> to the listitem, the plugin automatically picks up on this change and will do the rest for us.

<script>
    listitem.append( listview );
</script>

Result

Add it all together and you should have a .html file which looks something like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
        <title>My webpage</title>
        <link href="path/to/styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />
    </head>
    <body>
        <!-- The page -->
        <div id="page">
            <div id="header">
                <a href="#menu">Open the menu</a>
            </div>
            <div id="content">
                <p><strong>This is a demo.</strong><br>
                    <a id="add_li" href="#">Add a new menu item</a><br>
                    <a id="add_ul" href="#">Add a new submenu</a></p>
            </div>
        </div>

        <!-- The menu -->
        <nav id="menu">
            <ul id="list">
                <li><a href="/">Home</a></li>
                <li id="item"><a href="/about/">About us</a></li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>

        <script src="path/to/mmenu.js"></script>
        <script>
            document.addEventListener(
                "DOMContentLoaded", () => {
                    new Mmenu( "#menu" );

                    document.querySelector( "#add_li" )
                        .addEventListener(
                            "click", ( evnt ) => {
                                evnt.preventDefault();

                                //    Find the listview.
                                const listview = document.querySelector( "#list .mm-listview" );

                                //    Create the new listitem.
                                const listitem = document.createElement( "li" );
                                listitem.innerHTML = `<a href="/work">Our work</a>`;

                                //    Add the listitem to the listview.
                                listview.append( listitem );
                            }
                        );

                    document.querySelector( "#add_ul" )
                        .addEventListener(
                            "click", ( evnt ) => {
                                evnt.preventDefault();

                                //    Find the istitem.
                                const listitem = document.querySelector( "#item" );

                                //    Create the new listview.
                                const listview = document.createElement( "ul" );
                                listview.innerHTML = `
                                    <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>`;

                                //    Add the listview to the listitem.
                                listitem.append( listview );
                            }
                        );
                }
            );
        </script>
    </body>
</html>