The menu

Setup your menu like you normally would, using <ul />, <li /> and <a /> elements. Make sure to wrap the text in either an <a /> or a <span /> element.

<ul>
   <li><a href="/">Home</a></li>
   <li><a href="/about/">About us</a></li>
   <li><a href="/contact/">Contact</a></li>
</ul>

It is not important where in the HTML you put this menu, the mmenu.js plugin will move it (or a cloned version of it) to where it is needed. Most commonly, a menu would be located in the header.

Wrap it in an element

Wrap the <ul /> in an element (most commonly a <nav /> element) and give that element an ID.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>

Submenus

Just like you normally would, you can create submenus by simply adding an <ul /> (with in it <li /> and <a /> elements) in a <li />.

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

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

Next up:
Styling lists