Effects introduction

To apply additional effects on the menu, the panels or the listitems, add the preferred effect name(s) to the extensions option.

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

Example

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

  • 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>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</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 listitems drop down one by one.
fx-listitems-fade
Makes the listitems fade in one by one.
fx-listitems-slide
Makes the listitems 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 Datatype Default value Description
Include CSS
$mm_include_effects Boolean true Whether or not to include CSS for the effects extension throughout the entire CSS framework.
$mm_include_effects_menuzoom Boolean $mm_include_effects Whether or not to include CSS for the "menu zoom" effect throughout the entire CSS framework.
$mm_include_effects_menuslide Boolean $mm_include_effects Whether or not to include CSS for the "menu slide" effect throughout the entire CSS framework.
$mm_include_effects_menufade Boolean $mm_include_effects Whether or not to include CSS for the "menu fade" effect throughout the entire CSS framework.
$mm_include_effects_panelsnone Boolean $mm_include_effects Whether or not to include CSS for the "panels none" effect throughout the entire CSS framework.
$mm_include_effects_panelszoom Boolean $mm_include_effects Whether or not to include CSS for the "panels zoom" effect throughout the entire CSS framework.
$mm_include_effects_panelsslide Boolean $mm_include_effects Whether or not to include CSS for the "panels slide" effect throughout the entire CSS framework.
$mm_include_effects_listitemsslide Boolean $mm_include_effects Whether or not to include CSS for the "listitems slide" effect throughout the entire CSS framework.
$mm_include_effects_listitemsfade Boolean $mm_include_effects Whether or not to include CSS for the "listitems fade" effect throughout the entire CSS framework.
$mm_include_effects_listitemsdrop Boolean $mm_include_effects Whether or not to include CSS for the "listitems drop" effect throughout the entire CSS framework.
Sizes
$mm_zoomScaleDown Number 0.7 The zoom percentage.
$mm_zoomScaleUp Number 1.5 The zoom percentage.

Next extension:
Fullscreen