A style-free dropdown plugin for jQuery and Boost JS. While other plugins style your dropdown for you, this plugin only handles the functionality, leaving the layout and styling up to you.
Install with npm:
npm install boost-js-dropdown
Install in browser:
<script src="https://cdn.rawgit.com/marksmccann/boost-js-dropdown/v0.0.1/dist/dropdown.min.js"></script>
var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)
var dropdown = require('boost-js-dropdown');
// var dropdown = $.fn.boost.dropdown; (browser install)
$.fn.dropdown = boost( dropdown.plugin, dropdown.defaults );
<a href="#dropdown" data-role="trigger">Dropdown</a>
<ul id="dropdown">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
Note: the dropdown does not have to be a list of actions, it can be any element with whatever content you want.
$('#dropdown').dropdown();
Name | Default | Description |
---|---|---|
activeClass | "is-open" |
the class added to the trigger and dropdown when open |
onOpen | null |
a callback function called after the dropdown opens |
onClose | null |
a callback function called after the dropdown closes |
onInit | null |
a callback function called after the dropdown is initialized |
$('#dropdown').dropdown({
onInit: function() {
console.log( this.id ); // 'dropdown'
}
});
- or -
<ul id="dropdown" ... data-active-class="open">...</ul>
Opens the dropdown. fn
: optional callback function called after opening.
instance.open();
Closes the dropdown. fn
: optional callback function called after closing.
instance.close();
Closes the dropdown if it is open and vice versa. fn
: optional callback function.
instance.toggle();
Determines if dropdown is open or not.
instance.isOpen();
The trigger element.
instance.trigger;
$ npm install && npm test
Copyright © 2016, Mark McCann. Released under the MIT license.