DropDown: Transform select inputs into drop-down lists with some simple expanding effects

DropDown plugin is a simple drop-down list effects.
The idea is to transform a normal select input into something more appealing with a jQuery plugin.

The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.

With the generated structure it is easy to apply some simple effects in order to spice it up.

Please note that the CSS transforms and transitions only work in browsers that support them.

Without JavaScript, the normal select input will simply be shown.

Download: https://github.com/codrops/SimpleDropDownEffects

Demonstration: https://tympanus.net/Development/SimpleDropDownEffects/

Plugin homepage: https://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

Implementation:

1. FIRST, INCLUDE THE CSS & JQUERY FILES

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jquery.dropdown.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dropdown.js"></script>

Note that all CSS files used are available on GitHub

2. ADD YOUR HTML

<!-- Start out with a select input -->
<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

3. NOW, CALL THE DROPDOWN PLUGIN

<script type="text/javascript">
$(document).ready(function(){
      $( '#cd-dropdown' ).dropdown();
});
</script>

The select and the options get transformed into the following structure:

<div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
</div>

When clicking on the first span, the dropdown plugin apply the class “cd-active” to its parent, the division with the class “cd-dropdown”. When selecting an option, the respective span will get inserted into the first one.

Options:

speed	Integer	Default : 300 – Speed of the animation, in ms
easing	String	Default : ease – Effect type of the animation
stack	Boolean	Default : true – initial stack effect
delay	Integer	Default : 0 – delay between each option animation
random	Boolean	Default : false – random angle and positions for the options
rotated	Boolean	Default : false – rotated [right \|\| left \|\| false]: the options will be rotated to the right side or left side. make sure to set the transform-origin in the style sheet.
slidingIn	Boolean	Default : false – effect to slide in the options. Value is the margin to start with.
gutter	Integer	Default : 0 – gutter

Screenshots:

DropDown: Transform select inputs into drop-down lists with some simple expanding effects

About me