The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

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

Plugin rate :

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.

Implementation: 

1. FIRST, INCLUDE THE CSS & JQUERY FILES

1
2
3
4
5
6
<!-- 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

1
2
3
4
5
6
7
8
<!-- 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

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

 

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

1
2
3
4
5
6
7
8
9
10
<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

Comments

So nice man......Thumbs up

Amazing!

I can't get the value from the dropdown by id. It's always says 'undefined' as a value. What's wrong???

super :)

Interesting suggestions , Just to add my thoughts , if your company is requiring to merge two PDF files , my business found announcement here http://goo.gl/QrMzJy

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.8
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [5]