Open and close

The plugin automatically binds a click event that opens the menu to every <a /> element that links to the menu.

<a href="#my-menu">Open the menu</a>

Open the menu manually

If you're using some other element, for example a <button />, you can trigger the open method from the API to open the menu manually.

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

         document.querySelctor( "#my-open-button" )
            .addEventListener(
               "click", ( evnt ) => {
                  evnt.preventDefault();
                  api.open();
               }
            );
      }
   );
</script>

Close the menu

By default, the menu only closes after clicking on the still visible part of the page. The plugin also automatically binds a click event that closes the menu to every <a /> element that links to the page.

<a href="#my-page">Close the menu</a>

Close the menu manually

Trigger the close method from the API to close the menu manually.

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

         document.querySelctor( "#my-close-button" )
            .addEventListener(
               "click", ( evnt ) => {
                  evnt.preventDefault();
                  api.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.css" rel="stylesheet" />
   </head>
   <body>
      <div id="my-page">
         <div id="my-header">
            <a href="#my-menu">Open the menu</a>
            <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">
            <button id="my-open-button">Open the menu</button>
         </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", () => {
               const menu = new Mmenu( "#my-menu", {
                  slidingSubmenus: false
               });

               const api = menu.API;

               document.querySelctor( "#my-open-button" )
                  .addEventListener(
                     "click", ( evnt ) => {
                        evnt.preventDefault();
                        api.open();
                     }
                  );
            }
         );
      </script>
   </body>
</html>

Next up:
Learn more