Popup introduction

To open the menu as a popup, include the "popup" extension .css file and add "popup" to the extensions option.

   <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.popup.css" rel="stylesheet" />
      $(document).ready(function() {
            extensions: ["popup"]


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

  • Open the menu as a popup.
  • Works great with:
  • Dim out the page to black.
  • Automatically measure the menu height.
   jQuery(document).ready(function( $ ) {


CSS variables for the "popup" extension

The "popup" extension has no CSS variables.

SCSS variables for the "popup" extension

Variable Default value Datatype Description
Include CSS
$mm_opt_popup true Boolean Whether or not to include CSS for the popup extension throughout the entire CSS framework.
$mm_popupShadow 0 2px 10px rgba(#000,0.3) CSS value The box-shadow of the menu.
Works great with:
Incompattible with:
  • The effects extension (when animating the menu);
  • The sidebar add-on.

Next extension:

Deprecated There is a new, improved version available. Check it out on mmenujs.com

Get the new version No thanks