Positioning introduction

By default, the menu will be positioned behind the page and slide the page out to the right. To change this behavior, add the preferred positioning name(s) to the extensions option.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            new Mmenu( "#my-menu", {
                extensions: ["position-right", "position-front"]
            });
        }
    );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • 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>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</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 automatically position the menu in front of the page.

CSS variables for the "positioning" extension

The "positioning" extension has no CSS variables.

SCSS variables for the "positioning" extension

Variable Datatype Default value Description
Include CSS
$mm_include_positioning Boolean true Whether or not to include CSS for the positioning extension throughout the entire CSS framework.
$mm_include_positioning_right Boolean $mm_include_positioning Whether or not to include CSS for the positioning the menu at the right throughout the entire CSS framework.
$mm_include_positioning_top Boolean $mm_include_positioning Whether or not to include CSS for the positioning the menu at the top throughout the entire CSS framework.
$mm_include_positioning_bottom Boolean $mm_include_positioning Whether or not to include CSS for the positioning the menu at the bottom throughout the entire CSS framework.
$mm_include_positioning_front Boolean $mm_include_positioning Whether or not to include CSS for the positioning the menu in front throughout the entire CSS framework.

Next extension:
Shadows