Shadows introduction

If you want the page to have a shadow to emphasize it's in front of the menu, or if you want each panel to have a shadow to emphasize it's in front of its parent panel, add the preferred shadow style to the extensions option.

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

Example

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

  • Add a shadow to the page.
  • Add a shadow to the panels.
  • Works great with:
  • Show a small part of the parent panel.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Available shadows

shadow-menu
Adds a shadow to the menu.
shadow-page
Adds a shadow to the page.
shadow-panels
Adds a shadow to the panels.

CSS variables for the "shadows" extension

Variable Datatype Default value Description
--mm-shadow CSS value 0 0 10px rgba( 0,0,0, 0.3 ) The box-shadow for the menu, page and panels.

SCSS variables for the "shadows" extension

Variable Datatype Default value Description
Include CSS
$mm_include_shadows Boolean true Whether or not to include CSS for the shadowns extension throughout the entire CSS framework.
$mm_include_shadows_menu Boolean $mm_include_shadows Whether or not to include CSS for the menu shadow extension throughout the entire CSS framework.
$mm_include_shadows_page Boolean $mm_include_shadows Whether or not to include CSS for the page shadow extension throughout the entire CSS framework.
$mm_include_shadows_panels Boolean $mm_include_shadows Whether or not to include CSS for the panels shadow extension throughout the entire CSS framework.

Next extension:
Themes