Popup introduction

To open the menu as a popup, add "popup" to the extensions option.

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

Example

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

  • Open the menu as a popup.
  • Works great with:
  • Dim out the page to black.
  • Automatically measure the menu height.
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

CSS variables for the "popup" extension

The "popup" extension has no CSS variables.

SCSS variables for the "popup" extension

Variable Datatype Default value Description
Include CSS
$mm_include_popup Boolean true Whether or not to include CSS for the popup extension throughout the entire CSS framework.
Colors
$mm_popupShadow CSS value 0 2px 10px rgba(#000,0.3) The box-shadow of the menu.

Next extension:
Positioning