All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Dropdown class

Methods
Method name Description
new Dropdown(trigger, options) Constructor
.dismiss([callHandler]) Closes the dropdown.
.open([callHandler]) Opens the dropdown

new Ink.UI.Dropdown(trigger, options)

Accepts

  • trigger

    Trigger Element
  • options

    Options Object
  • options.target

    Target of the dropdown action. By default, dropdown will try to find an element with the `.dropdown-menu` class.
  • options.hoverOpen

    The number of seconds you need to hover with the mouse before the dropdown opens.
  • options.dismissOnInsideClick

    falseWhether to dismiss the dropdown when there's a click inside.
  • options.dismissOnOutsideClick

    trueWhether to dismiss the dropdown when there's a click outside.
  • options.dismissAfter

    When the mouse moves away from the dropdown, wait for `dismissAfter` seconds and only then dismiss.
  • options.onInsideClick

    Called when there's a click inside the dropdown.
  • options.onOutsideClick

    Called when there's a click outside the dropdown.
  • options.onOpen

    Called when the dropdown is opened.
  • options.onDismiss

    Called when the dropdown is dismissed.

Demo

Code

<div class="ink-dropdown" data-target="#my-menu-dropdown" id="my-dropdown">
    <button class="ink-button">Dropdown</button>
    <ul id="my-menu-dropdown" class="dropdown-menu">
        <li class="heading">I am a heading</li>
        <li class="separator-above"><a href="#">Option</a></li>
        <li><a href="#">Option</a></li>
        <li class="separator-above disabled"><a href="#">Disabled option</a></li>
    </ul>
</div>

<script>
    // Not necessary with autoload.js
    Ink.requireModules( ['Ink.UI.Dropdown_1'], function( Dropdown ){
        new Dropdown('#my-dropdown');
    });
</script>

To get an hidden default state for the dropdown menu, just add the hide-all class to the dropdown-menu aswell.

.dismiss([callHandler]) method

Closes the dropdown.

Accepts

  • callHandler

    falseWhether to call the onDismiss handler

.open([callHandler]) method

Opens the dropdown

Accepts

  • callHandler

    falsecall onOpen handler