Setup the menu
Now that we've set up our .html file and added the markup for a header and the content,
lets add a menu.
Most commonly a menu would 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>.
It is not important where in the markup the menu is located,
the mmenu.js plugin will move it (or a cloned version of it) to where it is needed.
For this tutorial, we'll add our menu at the bottom of the page.
<body>
<div id="page">
...
</div>
<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>
</body>
Note the ID "menu" on the <nav>,
we'll be using it later on to target the menu when firing the plugin.
Selected item
To make a <li> appear "selected", add the classname "Selected" to it.
The plugin will initially show the submenu that contains the last <li class="Selected"> it finds in the menu.
<nav id="menu">
<ul>
<li class="Selected"><a href="/">Home</a></li>
...
</ul>
</nav>
If you're using a different classname (for example "active"),
you must specify this in the classNames.selected option in the configuration object.
The below code example assumes you already have some knowledge of
firing the mmenu.js plugin.
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#menu", {
// options
}, {
// configuration
classNames: {
selected: "active"
}
});
}
);
</script>
Open submenus
The plugin assumes every <a> in a <li> 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>
Vertical submenus
By default, submenus will come sliding in from the right (while the parent menu slides out to the left).
You can set the slidingSubmenus option to false to prevent this behavior.
Or add the classname "Vertical" to a single submenu if you want it to expand below its parent.
<nav id="menu">
<ul>
...
<li><span>About us</span>
<ul class="Vertical">
...
</ul>
</li>
...
</ul>
</nav>
If you're using a different classname (for example "expand"),
you must specify this in the classNames.vertical option in the configuration object.
The below code example assumes you already have some knowledge of
firing the mmenu.js plugin.
<script>
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "#menu", {
// options
}, {
// configuration
classNames: {
vertical: "expand"
}
});
}
);
</script>