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>
jQuery Plugin Initialization
$(document).ready(function(){
$('.dropdown-button').dropdown();
});
Options
The default behavior of dropdown is to activate on hover. To have it activate on a click, you can pass that as an option.
$('.dropdown-button').dropdown({
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false // Activate on click
}
);