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, include the "shadows" extension .css file and add the shadow name 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.pageshadow.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["shadow-page"]
         });
      });
   </script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Add a shadow to the page.
  • Add a shadow to the panels.
  • Works great with:
  • Show a small part of the parent panel.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
Works great with:

Available shadows

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

SCSS variables for the "shadows" extension

Variable Default value Datatype Description
$mm_pageShadow 0 0 10px rgba(#000,0.3) CSS value The box-shadow of the page.
$mm_panelShadow 0 0 10px rgba(#000,0.3) CSS value The box-shadow of the panels.

SCSS mixins for the "shadows" extension

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_colors_pageshadow Include this mixin to create a custom color scheme for the page-shadow in the "shadows" extension.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$pageShadow $mm_pageShadow 2 The shadow behind the page.
)
mm_colors_panelshadow Include this mixin to create a custom color scheme for the panel-shadow in the "shadows" extension.
(
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$panelShadow $mm_panelShadow 2 The shadow behind panels.
)

Next extension:
Themes