Dropdown introduction

To open the menu as a dropdown from the menu-button, include the "dropdown" add-on .js and .css files and use the dropdown options.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.dropdown.min.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />
   <link href="path/to/jquery.mmenu.dropdown.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
      $(document).ready(function() {
         $("#my-menu").mmenu({
            dropdown: {
               // dropdown options
            }
         });
      });
   </script>

Example

Give it a go, change the options below and see how it affects the menu in the example on the right.

  • Open the menu as a dropdown.
  • Works great with:
  • Dim out the page to black.
  • Automatically measure the menu height.
<script type="text/javascript">
   jQuery(document).ready(function( $ ) {

   });
</script>
Dependencies:
Works great with:
  • The offCanvas.blockUI option set to false;
  • The pageDim extension;
  • The autoHeight add-on.
Incompattible with:
  • The offCanvas.position option set to "top" or "bottom";
  • The effects extension (when animating the menu);
  • The iconbar extension.

Options for the "dropdown" add-on

Option Default value Datatype Description
1 See the description.
dropdown A map of options or true for dropdown.drop.
{
drop false Boolean Whether or not to open the menu as a dropdown from the menu-button.
event click String The event to open and close the menu.
Possible values: "click", "hover", "click hover" and "hover click".
position A map of options or a string for position.of.
{
of null 1 String A valid jQuery selector for the button to click.
If omitted, the menu will automatically be positioned.
x null 1 String How to horizontally position the menu relative to the button.
Possible values: "left" and "right".
If omitted, the menu will automatically be positioned.
y null 1 String How to vertically position the menu relative to the button.
Possible values: "top" and "bottom".
If omitted, the menu will automatically be positioned.
}
tip true Boolean Whether or not to prepend the menu with a tip pointing to the menu-button.
}

Configuration for the "dropdown" add-on

Option Default value Datatype Description
1 Changing the value probalby requires changing some associated CSS.
dropdown
{
offset
{
button
{
x -10 Number The horizontal offset for the menu relative to the button.
y 10 Number The vertical offset for the menu relative to the button.
}
viewport
{
x 20 Number The horizontal offset for the menu relative to the viewport.
y 20 Number The vertical offset for the menu relative to the viewport.
}
}
height
{
max 880 1 Number The maximum height of the menu.
}
width
{
max 440 1 Number The maximum width of the menu.
}
}

API methods for the "dropdown" add-on

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

SCSS variables for the "dropdown" add-on

Variable Default value Datatype Description
$mm_dropdownShadow 0 2px 10px rgba(#000,0.3) CSS value The box-shadow of the menu.
$mm_dropdownTipX 20px CSS value The horizontal offset for the tip relative to the menu.
$mm_dropdownTipY 10px CSS value The vertical offset for the tip relative to the menu.

SCSS mixins for the "dropdown" add-on

The "dropdown" add-on has no SCSS mixins.

Next add-on:
Fixed elements