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, 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: dragging can be enabled on touch and desktop devices. If you only want to enable dragging the menu open on touchscreens, check for 'ontouchstart' in window.

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.open.
{
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.
}

Configuration for the "drag" add-on

The "drag" add-on has no configuration options.

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