Effects introduction

To apply additional effects on the menu, the panels or the menu items, include the "effects" extension .css file and add the effect name to the extensions option.

<head>
   <script src="path/to/jquery.js"></script>
   <script src="path/to/jquery.mmenu.js"></script>
   <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.effects.css" rel="stylesheet" />
   <script>
      $(document).ready(function() {
         $("#my-menu").mmenu({
            extensions: ["fx-menu-slide"]
         });
      });
   </script>

Example

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

  • Effects for the menu
  • No effect for the menu (default).
  • Use the "fade" effect.
  • Use the "slide" effect.
  • Use the "zoom" effect.
  • Effects for the panels
  • No effect for the panels.
  • Use the "slide 0" effect.
  • Use the "slide 30" effect (default).
  • Use the "slide 100" effect.
  • Use the "slide up" effect.
  • Use the "zoom" effect.
  • Effects for the listitems
  • No effect for the listitems (default).
  • Use the "drop" effect.
  • Use the "fade" effect.
  • Use the "slide" effect.
<script>
   jQuery(document).ready(function( $ ) {

   });
</script>

Available effects

fx-menu-fade
Makes the menu fade in.
fx-menu-slide
Makes the menu slide in from the side.
fx-menu-zoom
Makes the menu zoom in.
fx-panels-none
Makes the panels intantly appear without an animation.
fx-panels-slide-0
Makes the panels not slide out while opening a submenu.
fx-panels-slide-100
Makes the panels fully slide out while opening a submenu.
fx-panels-slide-up
Makes the panels slide in from below.
fx-panels-slide-right
Makes the panels slide in from the left.
fx-panels-zoom
Makes the panels zoom out while opening a submenu.
fx-listitems-drop
Makes the menu items drop down one by one.
fx-listitems-fade
Makes the menu items fade in one by one.
fx-listitems-slide
Makes the menu items slide (and fade) in one by one.

CSS variables for the "effects" extension

The "effects" extension has no CSS variables.

SCSS variables for the "effects" extension

Variable Default value Datatype Description
Include CSS
$mm_opt_effects true Boolean Whether or not to include CSS for the effects extension throughout the entire CSS framework.
$mm_opt_effects_menuzoom $mm_opt_effects Boolean Whether or not to include CSS for the "menu zoom" effect throughout the entire CSS framework.
$mm_opt_effects_menuslide $mm_opt_effects Boolean Whether or not to include CSS for the "menu slide" effect throughout the entire CSS framework.
$mm_opt_effects_menufade $mm_opt_effects Boolean Whether or not to include CSS for the "menu fade" effect throughout the entire CSS framework.
$mm_opt_effects_panelsnone $mm_opt_effects Boolean Whether or not to include CSS for the "panels none" effect throughout the entire CSS framework.
$mm_opt_effects_panelszoom $mm_opt_effects Boolean Whether or not to include CSS for the "panels zoom" effect throughout the entire CSS framework.
$mm_opt_effects_panelsslide $mm_opt_effects Boolean Whether or not to include CSS for the "panels slide" effect throughout the entire CSS framework.
$mm_opt_effects_listitemsslide $mm_opt_effects Boolean Whether or not to include CSS for the "listitems slide" effect throughout the entire CSS framework.
$mm_opt_effects_listitemsfade $mm_opt_effects Boolean Whether or not to include CSS for the "listitems fade" effect throughout the entire CSS framework.
$mm_opt_effects_listitemsdrop $mm_opt_effects Boolean Whether or not to include CSS for the "listitems drop" effect throughout the entire CSS framework.
Sizes
$mm_zoomScaleDown 0.7 Number The zoom percentage.
$mm_zoomScaleUp 1.5 Number The zoom percentage.
Dependencies:
  • Core (on-canvas).
  • The offCanvas add-on (when animating the menu).
Incompattible with:
  • The slidingSubmenus option set to false (when animating the panels);
  • The positioning extension (position-front when animating the menu);
  • The popup extension (when animating the menu);
  • The dropdown add-on (when animating the menu);
  • The sidebar add-on (when animating the menu).

Next extension:
Fullscreen