Animated & Multi-level jQuery Dropdown Plugin

A dropdown jQuery plugin that turns select options or nested Html lists into an animated, multi-level drop down menu/list with a subtle sliding effect.

How to use it:

1. Import jQuery library and the jQuery dropdown plugin's stylesheet and JavaScript into your web page.

<link href="css/jquery.dropdown.css" rel="stylesheet" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.dropdown.js"></script>

2. Import the Font Awesome 4 for the dropdown icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

3. The Html markup.

<!-- Select element-->

<select>
  <option>Select Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<!-- Html lists -->

<ul>
  <li>Item 1</li>
  <li data-dropdown-text="Item 2">
    <ul>
      <li data-dropdown-text="Item 2.1">
        <ul>
          <li>Item 2.1.1</li>
          <li>Item 2.1.2</li>
          <li>Item 2.1.3</li>
        </ul>
      </li>
      <li data-dropdown-text="Item 2.2">
        <ul>
          <li>Item 2.2.1</li>
          <li>Item 2.2.2</li>
          <li>Item 2.2.3</li>
        </ul>
      </li>
      <li data-dropdown-text="Item 2.3">
        <ul>
          <li>Item 2.3.1</li>
          <li>Item 2.3.2</li>
          <li>Item 2.3.3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

4. Call the plugin to generate a nice looking dropdown from the select element or the Html lists.

$('select, ul').dropdown();

5. Available options to customize the dropdown.

$('select, ul').dropdown({

  // Animation
  speed: 200,
  easing: 'easeInOutCirc',

  // Positioning
  margin:         20,
  collision:      true,
  autoResize:     200,
  scrollSelected: true,

  // Keyboard navigation
  keyboard: true,

  // Nesting
  nested: true,
  selectParents: false,

  // Multiple
  multi:     false,
  maxSelect: false,
  minSelect: false,

  // Links
  selectLinks: false,
  followLinks: true,

  // Close
  closeText:     'Close',
  autoClose:     true,
  autoCloseMax:  true,
  autoCloseLink: true,
  closeReset:    true,

  // Back
  backText: 'Back',

  // Toggle
  toggleText:    'Please select',
  autoToggle:     true,
  autoToggleLink: false,
  autoToggleHTML: false,

  // Title
  titleText: 'Please select',
  autoTitle: true,

  // Custom classes
  classes: {},

  // Custom templates
  templates: {}

});

Change log:

2017-01-05

• autoToggleHTML option added

2016-12-30

• scrollSelected option added

2015-09-18

• Added labels and dividers and ability to select parent.
• Added nested option. 

2015-09-16

• Fixed toggle overflow bug

2015-09-15

• Added 'deselect', 'value' and 'selected' methods

2015-01-31

• Minor bug fixes

---

This awesome jQuery plugin is developed by daneWilliams. For more Advanced Usages, please check the demo page or visit the official website.