This time I will share jQuery Plugin and tutorial about Customizable & Animated Dropdown Plugin with jQuery and CSS3 – Nice Select, hope it will help you in programming stack.
Yet another jQuery select replacement plugin that turns your native html select boxes into customizable and CSS3 animated dropdown lists with one JS call.
The plugin will convert a standard select box:
2 |
<option value="1">Option 1</option> |
3 |
<option value="2">Option 2</option> |
4 |
<option value="3">Option 3</option> |
Into an easy-to-style html list:
1 |
<div class="nice-select"> |
2 |
<span class="current">Option 1</span> |
4 |
<li class="option selected">Option 1</li> |
5 |
<li class="option">Option 2</li> |
6 |
<li class="option">Option 3</li> |
How to use it:
1. Add references to jQuery library, nice-select.css and jquery.nice-select.js.
1 |
<link href="css/nice-select.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
3 |
<script src="js/jquery.nice-select.js"></script> |
2. Call the function niceSelect() on the select element and done.
1 |
$(document).ready(function() { |
2 |
$('select').niceSelect(); |
3. Make the dropdown list full width.
4. Make the dropdown list right aligned.
Change log:
2016-05-09
- Add update and destroy methods
2016-02-16
- Improve support for IE <= 10
2016-02-03
2015-12-31
- Add support for disabled options
This awesome jQuery plugin is developed by hernansartorio. For more Advanced Usages, please check the demo page or visit the official website.
