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 in two different ways.

1. Include only the jQuery.mmenu.oncanvas .js and .css files instead of the jquery.mmenu .js and .css files:

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.oncanvas.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.oncanvas.css" type="text/css" rel="stylesheet" />

2. Set 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%;.

Off-canvas

As mentioned, an off-canvas menu is the default behavior for the plugin. To achieve this behavior, the jquery.mmenu .js and .css files are a combination of the core and the "offCanvas" add-on files.

If you want an off-canvas menu, follow the 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.

<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