Drag introduction

To enable the menu to be opened by a dragging gesture or to enable a subpanel to be closed by a swiping gesture, include the Hammer library and use the drag options and configuration.

<script src="path/to/hammer.min.js"></script>
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            drag: {
               // drag options
            }
         }, {
            drag: {
               // drag configuration
            }
         });
      }
   );
</script>

Tip: Hammer.js enables dragging on touch and desktop devices. If you only want to enable dragging the menu open on touchscreens, use the $.mmenu.support.touch variable.

Options for the "drag" add-on

Option Datatype Default value Description
1 See the description.
2 If the option is a String, it will be used as a query selector.
drag A map of options or true for drag.menu and drag.panels.
{
menu A map of options or true for drag.menu.open.
{
maxStartPos Number 100 The maximum x-position to start dragging the page.
open Boolean false Whether or not to open the menu when dragging the page.
node HTMLElement 2 null 1 The element on which the user can drag to open the menu.
If omitted, the entire page is used.
threshold Number 50 The minimum amount of pixels to drag before actually opening the menu, less than 50 is not advised.
}
panels A map of options or true for drag.panels.close.
{
close Boolean false Whether or not to close a panel when swiping it out.
}
}

Configuration for the "drag" add-on

Option Datatype Default value Description
1 The value should match the related CSS value.
drag
{
menu
{
height
{
perc Number 0.8 1 The height of the menu as a percentage. From 0.0 (fully hidden) to 1.0 (fully opened).
min Number 140 1 The minimum height of the menu.
max Number 880 1 The maximum height of the menu.
}
width
{
perc Number 0.8 1 The width of the menu as a percentage. From 0.0 (fully hidden) to 1.0 (fully opened).
min Number 140 1 The minimum width of the menu.
max Number 440 1 The maximum width of the menu.
}
}
}

API methods for the "drag" add-on

The "drag" add-on has no API methods.

CSS variables for the "drag" add-on

The "drag" add-on has no CSS variables.

SCSS variables for the "drag" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_drag Boolean true Whether or not to include CSS for the drag add-on throughout the entire CSS framework.

Next add-on:
Dropdown