In this tutorial, we'll create a lightweight mobile menu using the mmenu light plugin. 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 some basic markup for a header and the content.
For this tutorial we'll assume you already have a stylesheet (called my-styles.css) for styling this markup.
<!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>Page title</h1>
<p>Some content.</p>
</div>
</div>
</body>
</html>
Next, include the mmenu .js and .css files.
Most commonly,
.css files are located in the <head> and
.js files are located before the closing <body>.
<!DOCTYPE html>
<html>
<head>
...
<link href="path/to/mmenu-light.css" rel="stylesheet" />
</head>
<body>
...
<script src="path/to/mmenu-light.js"></script>
</body>
</html>
Now that we've set up our .html file and added the markup for a header and the content, lets add a menu. For this tutorial, we'll add our menu in the header.
It is not important where in the markup the menu is located,
the mmenu light plugin appends the menu to the <body> when it is enabled
and puts it back in its original place when disabled.
With the mmenu light plugin, the menu needs to be constructed of <nav>, <ul>, <li> and <a> (or <span>) elements.
You can add a submenus simply by adding an <ul> (with in it <li> and <a> elements) in a <li>.
<body>
<div id="page">
<div id="header">
<nav id="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="content">
...
</div>
</div>
</body>
Note the ID "menu" on the <nav>,
we'll be using it later on to target the menu when firing the plugin.
The plugin assumes every <a> in the menu should be clickable,
it therefor adds the anchor to open a submenu next to the <a>.
If our website has no main page for the "about" section,
we could replace the <a href="/about/"> with a <span>.
This way the anchor to open the submenu will fill up the entire <li>.
<nav id="menu">
<ul>
...
<li><span>About us</span>
<ul>
...
</ul>
</li>
...
</ul>
</nav>
Now that we have created a .html file,
included all needed .css and .js files and set up the markup for the page and the menu,
we can fire the plugin.
Most commonly, you'd write the JavaScript in a separate .js file,
but for this tutorial we'll write it in an inline <script>.
Lets create an instance of the mmenu light plugin and provide it with the menu element.
Remember the ID "menu" on the <nav>?
We're now using it to target the menu.
Also, we tell the plugin when the menu should be enabled by specifying a media query in the second argument. For this tutorial, we want the menu to only appear and function as an off-canvas mobile menu when the width of the window is less than 600 pixels.
<script>
const menu = new MmenuLight(
document.querySelector( "#menu" ),
"(max-width: 600px)"
);
</script>
For navigation functionality (styled listviews, a fixed navbar and sliding submenus),
we need to activate the navigation add-on.
<script>
const navigator = menu.navigation({
// options
});
</script>
For off-canvas functionality,
we need to activate the offcanvas add-on.
<script>
const drawer = menu.offcanvas({
// options
});
</script>
Both the navigation and offcanvas add-ons provides a set of options of their own.
Have a look at
the documentation
for more information on the options.
Now that we've set up our menu, we need to be able to open it by clicking an anchor.
So lets add an <a> in our header and bind an event listener to it for opening the menu.
<body>
<div id="page">
<div id="header">
<a href="#menu">Open the menu</a>
<nav id="menu">
...
</nav>
</div>
...
</div>
...
<script>
document.addEventListener(
"DOMContentLoaded", () => {
...
document.querySelector( "a[href='#menu']" )
.addEventListener( "click", ( event ) => {
event.preventDefault();
drawer.open();
});
}
);
</script>
</body>
By default, the menu automatically closes after clicking on the still visible part of the page.
Invoke the close method to close the menu manually.
<script>
drawer.close();
</script>
For a complete overview of all methods, check out the the documentation.
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-light.css" rel="stylesheet" />
</head>
<body>
<div id="page">
<div id="header">
<a href="#menu">Open the menu</a>
<nav id="menu">
<ul>
<li class="Selected"><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>
</div>
<div id="content">
<h1>The title</h1>
<p>Some content.</p>
</div>
</div>
<script src="path/to/mmenu-light.js"></script>
<script>
document.addEventListener(
"DOMContentLoaded", () => {
const menu = new MmenuLight(
document.querySelector( "#menu" ),
"(max-width: 600px)"
);
const navigator = menu.navigation();
const drawer = menu.offcanvas();
document.querySelector( "a[href='#menu']" )
.addEventListener( "click", ( evnt ) => {
evnt.preventDefault();
drawer.open();
});
}
);
</script>
</body>
</html>