Page dim introduction

If you want the page to dim out a bit when the menu is opened, add the preferred dimming style to the extensions option.

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

Example

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

  • Do not dim out the page (default).
  • Dim out the page to white.
  • Dim out the page to black.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</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 Datatype Default value Description
Include CSS
$mm_include_pagedim Boolean true Whether or not to include CSS for the pageDim extension throughout the entire CSS framework.
$mm_include_pagedim_default Boolean $mm_include_pagedim Whether or not to include CSS for the default page dim throughout the entire CSS framework.
$mm_include_pagedim_black Boolean $mm_include_pagedim Whether or not to include CSS for the black page dim throughout the entire CSS framework.
$mm_include_pagedim_white Boolean $mm_include_pagedim Whether or not to include CSS for the white page dim throughout the entire CSS framework.

Next extension:
Popup