Positioning introduction

By default, the menu will always be positioned behind the page and slide the page out to the right. To change this behavior, include the "positioning" extension .css file and use the offCanvas.position and offCanvas.zposition options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.positioning.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            offCanvas: {
               position  : "right",
               zposition : "front"
            }
         });
      });
   </script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Position
  • Position the menu at the left (default).
  • Position the menu at the right.
  • Position the menu at the top.
  • Position the menu at the bottom.
  • Z-position
  • Position the menu behind the page (default).
  • Positions the menu in front of the page.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>

Available positions

left (default)
Positions the menu at the left of the page.
top
Positions the menu at the top of the page.
right
Positions the menu at the right of the page.
bottom
Positions the menu at the bottom of the page.

Available z-positions

back (default)
Positions the menu behind the page.
front
Positions the menu in front of the page.
next
Positions the menu next to the page.

Note that position: "top" and position: "bottom" will only work in combination with zposition: "front".

SCSS variables for the "positioning" extension

The "positioning" extension has no SCSS variables.

Dependencies:
Incompattible with:

Next extension:
Shadows