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.

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.
Dependencies:
Incompattible with:

Next extension:
Popup