Page dim introduction

If you want the page to dim out a bit when the menu is opened, include the "pageDim" extension .css file and add "pagedim" 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.pagedim.css" rel="stylesheet" />
   <script>
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["pagedim"]
         });
      });
   </script>

Example

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

  • Do not dim out the page (default).
  • Dim out the page to white.
  • Dim out the page to black. 
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Available colors

pagedim
Dims out the page to its background color.
pagedim-white
Dims out the page to white.
pagedim-black
Dims out the page to black.

CSS variables for the "pageDim" extension

The "pageDim" extension has no CSS variables.

SCSS variables for the "pageDim" extension

Variable Default value Datatype Description
Include CSS
$mm_opt_pagedim true Boolean Whether or not to include CSS for the pageDim extension throughout the entire CSS framework.
$mm_opt_pagedim_default $mm_opt_pagedim Boolean Whether or not to include CSS for the default page dim throughout the entire CSS framework.
$mm_opt_pagedim_black $mm_opt_pagedim Boolean Whether or not to include CSS for the black page dim throughout the entire CSS framework.
$mm_opt_pagedim_white $mm_opt_pagedim Boolean Whether or not to include CSS for the white page dim throughout the entire CSS framework.

Compatibility

Dependencies:
Incompattible with:

Next extension:
Popup

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

Get the new version No thanks