Animated & Multi-level jQuery Dropdown Plugin

File Size: 35 KB
Views Total: 30456
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="js/jquery.dropdown.js"></script>

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

<link rel="stylesheet" href="//">

3. The Html markup.

<!-- Select element-->

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

<!-- Html lists -->

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

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:


  • autoToggleHTML option added


  • scrollSelected option added


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


  • Fixed toggle overflow bug


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


  • 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.