Positioning introduction

By default, the menu will be positioned behind the page and slide the page out to the right. To change this behavior, include the "positioning" extension .css file and add the position name to the extensions option.

<head>
   <script src="path/to/jquery.js"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.positioning.css" rel="stylesheet" />
   <script>
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["position-right"]
         });
      });
   </script>

Example

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

  • Position
  • Open the menu from the left (default).
  • Open the menu from the right.
  • Position the menu at the top.
  • Position the menu at the bottom
  • Z-position
  • Positions the menu behind the page (default).
  • Positions the menu in front of the page.
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Available positions

position-right
Positions the menu at the right of the page.
position-top
Positions the menu at the top and in front of the page.
position-bottom
Positions the menu at the bottom and in front of the page.
position-front
Positions the menu in front of the page.

Note that position-top and position-bottom will also position the menu in front of the page but position-right will not.

SCSS variables for the "positioning" extension

Variable Default value Datatype Description
Include CSS
$mm_opt_positioning true Boolean Whether or not to include CSS for the positioning extension throughout the entire CSS framework.
$mm_opt_positioning_right $mm_opt_positioning Boolean Whether or not to include CSS for the positioning the menu at the right throughout the entire CSS framework.
$mm_opt_positioning_top $mm_opt_positioning Boolean Whether or not to include CSS for the positioning the menu at the top throughout the entire CSS framework.
$mm_opt_positioning_bottom $mm_opt_positioning Boolean Whether or not to include CSS for the positioning the menu at the bottom throughout the entire CSS framework.
$mm_opt_positioning_front $mm_opt_positioning Boolean Whether or not to include CSS for the positioning the menu in front throughout the entire CSS framework.
Dependencies:
Incompattible with:

Next extension:
Shadows