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, the "drag" add-on .js and .css files and use the drag options.

<head>
   <script src="path/to/hammer.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.drag.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.drag.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            drag: {
               // drag options
            }
         });
      });
   </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 Default value Datatype Description
1 See the description.
2 If the option is a String, it will be used as a jQuery 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 100 Number The maximum x-position to start dragging the page.
open false Boolean Whether or not to open the menu when dragging the page.
node null 1 jQuery 2 The node on which the user can drag to open the menu.
If omitted, the entire page is used.
threshold 50 Number 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 false Boolean Whether or not to close a panel when swiping it out.
}
}

Configuration for the "drag" add-on

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

API methods for the "drag" add-on

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

SCSS variables for the "drag" add-on

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

Dependencies:
Incompattible with:
  • The effects extension (when animating the menu);
  • The iconbar extension.

Next add-on:
Dropdown