Fire the plugin

After you've included the needed .js and .css files and set up the HTML for the page and menu, all you need to do, is fire the plugin.

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

Options

The mmenu.js plugin provides a set of options for customizing your menu. The default option values can be overridden by passing new values to the method. If the options apply to all menus on your webpage, you could also override it in the plugin defaults.

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

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

For a complete overview of all options, check out the options and add-ons pages.

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";

         document.addEventListener(
            "DOMContentLoaded", () => {
               new Mmenu( "#my-menu", {
                  slidingSubmenus: false
               });
            }
         );
      </script>
   </body>
</html>

Next up:
Open and close the menu