Setup your menu like you normally would,
using <ul />, <li /> and <a /> elements.
Make sure to wrap the text in either an <a /> or a <span /> element.
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About us</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
It is not important where in the HTML you put this menu, the mmenu.js plugin will move it (or a cloned version of it) to where it is needed. Most commonly, a menu would be located in the header.
Wrap the <ul /> in an element (most commonly a <nav /> element) and give that element an ID.
<nav id="my-menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About us</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
Just like you normally would, you can create submenus by simply adding an <ul /> (with in it <li /> and <a /> elements) in a <li />.
<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>
You now 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>
<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">
<h1>The title</h1>
<p>Some content</p>
</div>
<div id="my-footer"></div>
</div>
<script src="path/to/mmenu.js"></script>
<script>
Mmenu.configs.offCanvas.page.selector = "#my-page";
</script>
</body>
</html>
Next up:
Styling lists