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.
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.
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> 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> 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>