Dropdown introduction

To open the menu as a dropdown from the menu button, use the dropdown options and configuration.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu", {
            dropdown: {
               // dropdown options
            }
         }, {
            dropdown: {
               // dropdown configuration
            }
         });
      }
   );
</script>

Example

Give it a go, change the options below and see how it affects the menu.

  • Open the menu as a dropdown.
  • Works great with:
  • Dim out the page to black.
  • Automatically measure the menu height.
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {

      }
   );
</script>

Options for the "dropdown" add-on

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

Configuration for the "dropdown" add-on

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

API methods for the "dropdown" add-on

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

CSS variables for the "dropdown" add-on

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

SCSS variables for the "dropdown" add-on

Variable Datatype Default value Description
Include CSS
$mm_include_dropdown Boolean true Whether or not to include CSS for the dropdown add-on throughout the entire CSS framework.
$mm_include_dropdown_tip Boolean $mm_include_dropdown Whether or not to include CSS for the dropdown tip throughout the entire CSS framework.
Colors
$mm_dropdownShadow CSS value 0 2px 10px rgba(#000,0.3) The box-shadow of the menu.
Sizes
$mm_dropdownTipX CSS value 20px The horizontal offset for the tip relative to the menu.
$mm_dropdownTipY CSS value 10px The vertical offset for the tip relative to the menu.

Next add-on:
Fixed elements