jQuery Drilldown
A simple jQuery plugin for creating animated drilldown menus.
Since v1.0.0, project follows Semantic Versioning.
Features
- UMD (AMD, Node/CommonJS) support
- Multiple menus on a single page
- Pretty flexible, doesn't enforce specific tags
- Lightweight: 2 KB when minified (even less after gzip)
Demo
View it here.
Usage
var options = {}; $('.drilldown').drilldown(options);Options
Shown with their default values:
{ event: 'click', // * View note below selector: 'a', // * View note below speed: 100, cssClass: { container: 'drilldown-container', root: 'drilldown-root', sub: 'drilldown-sub', back: 'drilldown-back' } }* Note: selector and event will be used for binding drilldown-initiating action in this manner:
$('.drilldown').on(event, selector, function () { /* ... */ });API
$('.drilldown').drilldown('reset')resets drilldown to its initial state$('.drilldown').drilldown('destroy')destroys plugin instance
CSS & HTML
.drilldown { overflow: hidden; } .drilldown-sub { display: none; }<div class="drilldown"> <!-- required --> <div class="drilldown-container"> <!-- required --> <ul class="drilldown-root"> <!-- required, but not necessarily UL --> <li><a>A Lorem ipsum</a></li> <li> <a>A Dolor sit amet</a> <ul class="drilldown-sub"> <!-- required for deeper (non-root) levels --> <li class="drilldown-back"><a>Back</a></li> <!-- required to be able to go back --> <li><a>A Fusce eget</a></li> <li> <a>A Quam vel lorem</a> <ul class="drilldown-sub"> <li class="drilldown-back"><a>Back</a></li> <li><a>A Molestie tincidunt</a></li> <li><a>A Pellentesque</a></li> </ul> </li> <li><a>A Sit amet tincidunt</a></li> </ul> </li> <li><a>A Consectetur</a></li> <li><a>A Maecenas id</a></li> <li> <a>A Hendrerit odio</a> <ul class="drilldown-sub"> <li class="drilldown-back"><a>Back</a></li> <li><a>A Cras tincidunt</a></li> <li><a>A Vivamus eu</a></li> </ul> </li> </ul> </div> </div>
