Wondering what’s next for npm?Check out our public roadmap! »

    @qrac/jquery-drilldown

    1.1.1 • Public • Published

    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>

    License

    MIT

    Keywords

    none

    Install

    npm i @qrac/jquery-drilldown

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    23.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar