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 uo" 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.

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