Introduction
Add a dropdown list to any button. Make sure that the data-activates attribute matches the id in the <ul> tag.
You can add a divider with the <li class="divider"></li> tag.
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
Options
| Option Name | Description |
|---|---|
| induration | The duration of the transition enter in milliseconds. Default: 300 |
| outduration | The duration of the transition out in milliseconds. Default: 225 |
| constrainwidth | If true, constrainWidth to the size of the dropdown activator. Default: true |
| hover | If true, the dropdown will open on hover. Default: false |
| gutter | This defines the spacing from the aligned edge. Default: 0 |
| beloworigin | If true, the dropdown will show below the activator. Default: false |
To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below.
<a class='dropdown-button btn' data-beloworigin="true" href='#' data-activates='dropdown1'>Drop Me!</a>
jQuery Plugin Initialization
Initialization for dropdowns is only necessary if you create them dynamically.
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
}
);