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