mmenu.js is a javascript plugin for creating app look-alike off-canvas menus. It turns a basic HTML menu structure (with <nav>, <ul>, <li> and <a> or <span> elements) into a fully functional off-canvas menu with sliding submenus.
How to use mmenu.js?
(1) create a html page
<!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" />
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="content">
<h1>This is a demo.</h1>
<p>Click the menu icon to toggle the menu.</p>
</div>
</div>
</body>
</html>(2) include the mmenu .js and .css files
<!DOCTYPE html>
<html>
<head>
...
<link href="path/to/mmenu.css" rel="stylesheet" />
</head>
<body>
...
<script src="path/to/mmenu.js"></script>
</body>
</html>(3) add script code
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#menu", {
// options
}, {
// configuration
offCanvas: {
page: {
nodetype: "section"
}
}
});
}
);
</script>
