The page

You probably don't need to make any changes to the HTML of your webpage. But if you can, it is recommended to wrap all HTML in only one <div />.

<body>
   <div id="my-page">
      <div id="my-header"></div>
      <div id="my-content">
         <h1>The title</h1>
         <p>Some content</p>
      </div>
      <div id="my-footer"></div>
   </div>
</body>

This wrapper <div /> is best off without a (min-/max-)width and (min-/max-)height, padding, border, margin, position, top, right, bottom, left or any other CSS value that changes its size and position.

Have a look at the tips and tricks for some useful information about how to setup your webpage.

If you're using some other element than a <div /> (for example a <section />), you must specify this in the offCanvas.page.nodetype option in the configuration object. Since this option probably 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
            offCanvas: {
               page: {
                  nodetype: "section"
               }
            }
         });
      }
   );
</script>
Override plugin defaults
<script>
   Mmenu.configs.offCanvas.page.nodetype = "section";

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

Keep reading if you want to know more about this particular issue. Otherwise, continue to the menu.

Why wrap all HTML?

Simply because some of the logic in the plugin is based on the assumption that there is only one HTML element it should consider to be the "page".

Why is it not required?

Because if you don't wrap all HTML, the plugin will do it for you.

Start HTML

<body>
   <div id="my-header"></div>
   <div id="my-content"></div>
   <div id="my-footer"></div>
</body>

HTML after firing mmenu plugin

<body>
   <div class="mm-page">
      <div id="my-header"></div>
      <div id="my-content"></div>
      <div id="my-footer"></div>
   </div>
</body>

Then what's the problem?

If you let the plugin wrap all HTML, a <video /> might restart (or not start at all), JavaScript in an inline <script /> will run twice, an <iframe /> will reload and so on.

Best practice

Even if you wrap all the HTML, some other JavaScript plugin or a third party widget can add HTML elements to the <body />, forcing the mmenu.js plugin to (once again) wrap all HTML.

Start HTML

<body>
   <div id="my-page">
      <div id="my-header"></div>
      <div id="my-content"></div>
      <div id="my-footer"></div>
   </div>
</body>

After firing a lightbox

<body>
   <div id="my-page">
      <div id="my-header"></div>
      <div id="my-content"></div>
      <div id="my-footer"></div>
   </div>
   <div id="lightbox"></div>
</body>

After firing mmenu

<body>
   <div class="mm-page">
      <div id="my-page">
         <div id="my-header"></div>
         <div id="my-content"></div>
         <div id="my-footer"></div>
      </div>
      <div id="lightbox"></div>
   </div>
</body>

It is therefor recommended you tell the plugin what HTML element it should consider to be the "page". You can do this by using the offCanvas.page.selector option in the configuration object. Since this option probably 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
            offCanvas: {
               page: {
                  selector: "#my-page"
               }
            }
         });
      }
   );
</script>
Override plugin defaults
<script>
   Mmenu.configs.offCanvas.page.selector = "#my-page";

   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"></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:
The menu