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

   });
</script>
Dependencies:
Incompattible with:

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

The "pagedim" extension has no SCSS variables.

SCSS mixins for the "pagedim" extension

The "pagedim" extension has no SCSS mixins.

Next extension:
Popup