Animated & Multi-level jQuery Dropdown Plugin
File Size: | 35 KB |
---|---|
Views Total: | 30187 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.