Styling lists

By default all <ol />s and <ul />s that are a direct descendant of a panel will automatically be styled like a listview. If you don't want an <ol /> or <ul /> to be styled like a listview, add the classname mm-nolistview to it.

<nav id="my-menu">
   <div>
      <p>Here's an UL that won't be styled like a listview:</p>
      <ul class="mm-nolistview">
         <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>
   </div>
</nav>

Selected item

To make a <li /> appear "selected", add the classname Selected to it.

<nav id="my-menu">
   <ul>
      <li class="Selected"><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</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. If this option applies to all menus on your webpage, you could also override it in the plugin defaults.

Override instance configuration
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
         }, {
            // configuration
            classNames: {
               selected: "active"
            }
         });
      }
   );
</script>
Override plugin defaults
<script>
   Mmenu.configs.classNames.selected = "active";

   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
         });
      }
   );
</script>

Open and close submenus

You don't need to worry about any links for opening and closing submenus, the plugin automatically adds them for you.

The plugin assumes every <a /> element in a <li /> should be clickable, it therefor adds the link to open its submenu next to the <a />. To make the entire menu item open the submenu, just replace the <a /> with a <span />.

<nav id="my-menu">
   <ul>
      <li><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>

Vertical submenus

By default, submenus will come sliding in from the right. 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="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a>
         <ul class="Vertical">
            <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>

If you're using a different classname (for example expand), you must specify this in the classNames.vertical option in the configuration object. If this option applies to all menus on your webpage, you could also override it in the plugin defaults.

Override instance configuration
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
         }, {
            // configuration
            classNames: {
               vertical: "expand"
            }
         });
      }
   );
</script>
Override plugin defaults
<script>
   Mmenu.configs.classNames.vertical = "expand";

   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            // options
         });
      }
   );
</script>

Recap

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 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>
         </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.classNames.selected = "active";
         Mmenu.configs.offCanvas.page.selector = "#my-page";
      </script>
   </body>
</html>

Next up:
Fire the plugin