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" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.effects.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(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.
  • 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 default effect for the panels.
  • Use the "slide 100" effect.
  • Use the "slide up" effect.
  • Use the "zoom" effect.
  • Effects for the listitems
  • No effect for the listitems.
  • Use the "drop" effect.
  • Use the "fade" effect.
  • Use the "slide" effect.
<script type="text/javascript">
   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-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
$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 offCanvas.position option set to "top" or "bottom" (when animating the menu);
  • The offCanvas.zposition option set to "front" or "next" (when animating the menu);
  • The Iconbar extension (when animating the menu);
  • The Popup extension (when animating the menu);
  • The Dropdown add-on (when animating the menu).

Next extension:
Fullscreen