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", () => {
         const menu = mmlight( document.querySelector( "#my-menu" ) );
         menu.create( "(max-width: 500px)" );
         menu.init( "selected" );
      }
   );
</script>

In the above example, a mobile menu is initiated from the <nav id="my-menu" /> element.

The argument passed to the create method tells the plugin when the mobile menu should be "active". In the above example, the menu will only appear and function as an off-canvas mobile menu when the width of the window is less than 500 pixels. Otherwise, the menu remains untouched.

The argument passed to the init method tells the plugin what classname (on a <li />) to search for in the menu and display it (the <li />) as selected. The first child (sub)menu (of the selected <li />) will be opened by default.

For a complete overview of all methods, check out the the documentation.

Open the menu

Opening the menu is pretty easy, just invoke the open method.

<script>
   menu.open();
</script>

But you probably want to open the menu after clicking an icon or link, so lets do so in an event listener on an anchor.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         const menu = mmlight( document.querySelector( "#my-menu" ) );
         menu.create( "(max-width: 500px)" );
         menu.init( "selected" );

         document.querySelector( "a[href='#my-menu']" )
            .addEventListener( "click", ( evnt ) => {
               menu.open();

               //   Don't forget to "preventDefault" and to "stopPropagation".
               evnt.preventDefault();
               evnt.stopPropagation();
            });
      }
   );
</script>

Close the menu

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>
   menu.close();
</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-light.css" rel="stylesheet" />
   </head>
   <body>
      <div id="my-page">
         <div id="my-header">
            <a href="#my-menu" class="hamburger"></a>
            <nav id="my-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="my-content">
            <h1>The title</h1>
            <p>Some content</p>
         </div>
         <div id="my-footer"></div>
      </div>

      <script src="path/to/mmenu-light.js"></script>
      <script>
         document.addEventListener(
            "DOMContentLoaded", () => {
               const menu = mmlight( document.querySelector( "#my-menu" ) );
               menu.create( "(max-width: 500px)" );
               menu.init( "selected" );

               document.querySelector( "a[href='#my-menu']" )
                  .addEventListener( "click", ( evnt ) => {
                     menu.open();

                     //   Don't forget to "preventDefault" and to "stopPropagation".
                     evnt.preventDefault();
                     evnt.stopPropagation();
                  });
            }
         );
      </script>
   </body>
</html>

Next up:
Learn more