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.
  • Positions the menu next to the page.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
Incompattible with:

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.

SCSS mixins for the "positioning" extension

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_sizing_right Include this mixin to create a menu with customized sizes that opens from the right.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$width $mm_width 2
$minWidth $mm_minWidth 2
$maxWidth mm_maxWidth 2
)
mm_sizing_zposition Include this mixin to create a menu with customized sizes that opens next to or in front of the page.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$height $mm_height 2
$minHeight $mm_minHeight 2
$maxHeight mm_maxHeight 2
)

Next extension:
Shadows