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.

   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.pagedim.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
            extensions: ["pagedim"]


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.
  • Dim out the page to white.
  • Dim out the page to black.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {


Available colors

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

SCSS variables for the "pageDim" extension

Variable Default value Datatype Description
$mm_pagedimOpacity 0.3 CSS value The opacity of the page-blocker.
Incompattible with:

Next extension: