Effects introduction

To apply additional effects on the menu or the panels, 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
  • Use the "slide" effect.
  • Effects for the panels
  • Default effect for panels.
  • Use the "slide 0" effect.
  • Use the "slide 100" effect. 
<script>
    document.addEventListener(
        "DOMContentLoaded", () => {

        }
    );
</script>

Available effects

fx-menu-slide
Makes the menu slide in from the side.
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.

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_menuslide Boolean $mm_include_effects Whether or not to include CSS for the "menu slide" 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_panelsslide Boolean $mm_include_effects Whether or not to include CSS for the "panels slide" effect throughout the entire CSS framework.

Next extension:
Fullscreen