Dynamic content

In this tutorial, we'll be using the menu API to 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.

Create 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. Next, we'll fire the plugin and access the menu API.

<nav id="my-menu">
    <ul id="my-list">
        <li><a href="/">Home</a></li>
        <li id="my-item"><a href="/about/">About us</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</nav>
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new Mmenu( "#my-menu" );
            const api = menu.API;
        }
    );
</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 #my-list > .mm-listview.

<script>
    const panel = document.querySelector( "#my-list" );
    const listview = panel.querySelector( ".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 and call the initPanels method from the menu API. The initPanels method expects one argument: an array of panels it needs to (re)initiate.

<script>
    listview.append( listitem );
    api.initPanels( [panel] );
</script>

Add new submenus

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

<script>
    const panel = document.querySelector( "#my-list" );
    const listitem = document.querySelector( "#my-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 and call the initPanels method from the menu API. Again, the initPanels method expects one argument: an array of panels it needs to (re)initiate.

<script>
    listitem.append( listview );
    api.initPanels( [panel] );
</script>

Example

Recap

Add it all together and you should 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.css" rel="stylesheet" />
    </head>
    <body>
        <!-- The page -->
        <div id="my-page">
            <div id="my-header">
                <a href="#my-menu">Open the menu</a>
            </div>
            <div id="my-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="my-menu">
            <ul id="my-list">
                <li><a href="/">Home</a></li>
                <li id="my-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>
            Mmenu.configs.offCanvas.page.selector = "#my-page";

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

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

                                //    Find the panel and listitem.
                                const panel = document.querySelector( "#my-list" );
                                const listitem = document.querySelector( "#my-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 );

                                //    Update the listview.
                                api.initPanels( [panel] );
                            }
                        );

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

                                //    Find the panel and listitem.
                                const panel = document.querySelector( "#my-list" );
                                const listitem = document.querySelector( "#my-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 );

                                //    Update the listview.
                                api.initPanels( [panel] );
                            }
                        );
                }
            );
        </script>
    </body>
</html>