Dropdowns

The dropdowns component allows for the use of .on-click and .on-hover modifier classes for dropwns. These modifiers can be used by initiating the dropdowns JavaScript using the init() method.

dropdowns.init();
<div class="dropdown-trigger on-click">
  <button class="button">On Click</button>
  <div class="dropdown">
    ...
  </div>
</div>

<div class="dropdown-trigger on-hover">
  <button class="button">On Hover</button>
  <div class="dropdown">
    ...
  </div>
</div>

For more information on how to use and customize the dropdowns markup and styles, take a look at the dropdowns block documentation.

Options

When initiating the dropdowns component, you can pass in the following options to override defaults.

Parameter Type Default Description
classTrigger String 'dropdown-trigger' Class name for dropdown triggers
classDropdown String 'dropdown' Class name for dropdowns
classOnClick String 'on-click' Class name for the on click behavior
classOnHover String 'on-hover' Class name for the on hover behavior
classActive String 'active' Class name for the active state
delay Milliseconds 500 The length of delay before removing the active class

.init()

Initializes the dropdowns component using either default settings or custom options passed in.

dropdowns.init( options )
Parameter Type Description
options JSON Custom options for component

.destroy()

Destroys the dropdowns component by removing event listeners and clearing the settings variable.

dropdowns.destroy()