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();

$('#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.