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"></div>
      <div id="my-footer"></div>
   </div>
</body>

This 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.pageNodetype option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         offCanvas: {
            pageNodetype: "section"
         }
      });
   });
</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 node 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:

Base 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 will restart (or not start at all), javascript in a SCRIPT will run twice, an IFRAME will reload and so on.

Best practice

Even if you wrap all the HTML, some other javascript plugin can still add HTML nodes to the BODY, forcing the plugin to (once again) wrap all HTML.

Base HTML

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



After firing lightbox

<body>
   <div id="my-wrapper">
      <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-wrapper">
         <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 node it should consider to be the "page". You can do this using the offCanvas.pageSelector option in the configuration object.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         // options
      }, {
         // configuration
         offCanvas: {
            pageSelector: "#my-wrapper"
         }
      });
   });
</script>

Next up:
The menu