Drop-down List Effect

by pixelpapa

Drop-down List Effect

Designed by Mary Lou, this drop-down list effect comes in a simple but beautiful design. This tutorial is a jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

The idea is to transform a normal select input into something more appealing with a jQuery plugin. The transitions control the expanding of options and configuring the parameters is a way to achieve unique effects.

Moreover, this little plugin 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.

Furthermore, 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.

Lastly, in the link, you’ll find the download source and a few links to the demos with different configurations in action. Feel free to share and enjoy!