On- and off-canvas

By default, the plugin will prepend the menu to the BODY and hide it from sight. When the menu is being opened, the page slides out of view, revealing the menu and blocking the page from interaction. In other forms, the menu can be revealed by sliding in view, hiding the page behind it. This kind of behavior is called an "off-canvas" menu.

An "on-canvas" menu on the other hand, is always opened and visible. It is not prepended to the BODY and will not slide out the page.

On-canvas

If you want an on-canvas menu, you need to prevent the plugin from doing its default off-canvas behavior. You can do this by setting the offCanvas option to false:

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

Note that an on-canvas menu has position: absolute;, width: 100%; and height: 100%;. It will fill up its first ancestor node that has position: relative;.

Off-canvas

As mentioned, an off-canvas menu is the default behavior for the plugin.
If you want an off-canvas menu, follow this tutorial.

Example

In the left example, the offCanvas option is set to false, this disables the "offCanvas" add-on and results in an on-canvas menu filling up the available width and height of the BODY.

<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu({
         offCanvas: false
      });
   });
</script>
Open in a new window
<script type="text/javascript">
   $(document).ready(function() {
      $("#my-menu").mmenu();
   });
</script>


Open in a new window