Today we want to share some simple drop-down list effects with you. 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.
After the great custom drop-down list styles made by Hugo in his tutorial Custom Drop-Down List Styling, we wanted to make it simple to create a custom structure from a normal select input (without multiple option selection). So, we’ve come up with this little plugin that will allow some custom styling of the drop-down list. 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.
The icon font was created with IcoMoon.
So, we start out with a select input, for example:
<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>
A dropdown plugin can be applied as follows:
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, we will 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.
OptionsThe following default options are available:
speed : 300, easing : 'ease', gutter : 0, // initial stack effect stack : true, // delay between each option animation delay : 0, // random angle and positions for the options random : 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 rotated : false, // effect to slide in the options // value is the margin to start with slidingIn : false