Result
You now 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>
<div id="page">
<div id="header">
<a href="#menu">Open the menu</a>
</div>
<div id="content">
<h1>This is a demo.</h1>
<p>Click the menu icon to open the menu.</p>
</div>
</div>
<nav id="menu">
<ul>
<li class="active"><a href="/">Home</a></li>
<li><span>About us</span>
<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>
<script src="path/to/mmenu.js"></script>
<script>
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new Mmenu( "#menu", {
slidingSubmenus: false
}, {
classNames: {
selected: "active"
},
offCanvas: {
page: {
selector: "#page"
}
}
});
}
);
</script>
</body>
</html>