Simple Effects for Drop-Down Lists

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.
Simple Effects for Drop-Down Lists

From our sponsor: Design every part of your website with the Divi Theme Builder.

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.

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

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:

$( '#cd-dropdown' ).dropdown();

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.

Options

The 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

The basic common styling is defined in the common.css file and you can see the individual styles in the styleN.css style sheets.

Demos

Check out the demos to see some different configurations in action:

Hope you enjoy this little plugin!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 183

Comments are closed.
  1. Your tutorials are just amazing but I wonder you provide both javascript and css code Can you explain how do i use these codes in blogger.

  2. It’s a really nice dropdown menu, but I haven’t been able to add URL’s to each of the options, can you explain me how that can be done?

  3. hey …can u help me..
    tell me how to get the values of the selected option . can we use alert to each randomly selected option.

    i tried a lot, it is not working due to css.

    please help me soon…please please.

  4. Hey there
    That was a wonderful piece of code, very nice work indeed. I envy you! 🙂

    And for people who are wondering how to get the values, i guess you can use this code. Not sure if this is correct, but works for me

    $( function() {

    $( '#cd-dropdown' ).dropdown({
    onOptionSelect : function(opt) {

    alert(opt.attr("data-value"));
    }
    });

    });

  5. Ravi has already asked this and I am curious as well:

    Is it possible for it to function like select box, i mean when we click on the page the select box will collapse automatically …

  6. If you have more than one of these drop-down on a page, and they are close to each other, they may overlap incorrectly. I added a startzindex option, then set the minZIndex to that option. This way you can do a $(‘.dropdown’).each with a decreasing starting zindex so that they don’t overlap.

    example:

    in header or js file:

    zz = 1600;
    $(‘.select_survey’).each(function(){
    $(this).dropdown({ ‘setzindex’ : zz });
    zz = zz – 100;
    });

    jquery.dropdown.js changes:
    add:
    // for multiple overlays
    setzindex : 1000,

    change:
    this.minZIndex = 1000
    to:
    this.minZIndex = self.options.setzindex;

  7. The demo 2 effect is just awesome. Thank you for keeping this incredible website.

  8. Nice works!
    I have a simple question (dumb question):
    – How i put link in this stuff?

  9. I loved this tutorial but I have a question !
    Is there anything we can do to add particular URLs to drop-down items … :/ ???

  10. Thank you very much of this! I love it. There is one tiny little problem.. it’s totally useless (sorry). Unless you can give us some instructions on how to add a link to the items. We all need this. I hope you can help asap. 😀

  11. Amazing tutorial, i just wonder how you make buttons work with links to another websites, thanks for your help

  12. Hi there,

    My nice friend helped me with this and I wanted to share you this. If you want to add links to the drop down, find the section below in your .js file


    this.opts.on( ‘click.dropdown’, function() {
    if( self.opened ) {
    var opt = $( this );
    self.options.onOptionSelect( opt );
    self.inputEl.val( opt.data( ‘value’ ) );

    —> and add the the following section after it:


    if ((document.location.href).indexOf(“index4”) !== -1) {
    if (opt.data(‘value’)==1) {
    window.location=’http://www.yourdomain.fi’;
    }

    if (opt.data(‘value’)==2) {
    window.location=’http://www.yourdomain.fi’;
    }
    }

    I hope this helps. 🙂

    • Sorry…

      The “index4” is the name of the domain, where the drop down menu is located.

  13. You can set the url using the value of the options.
    Example:


    <option value="http://www.codrops.com" class="icon-monkey">Monkey</option>

    Then you can call the plugin like this:


    $( '#cd-dropdown' ).dropdown( {
    gutter : 5,
    onOptionSelect : function( opt ) {
    window.location = opt.data( 'value' );
    }
    } );

    Hope it helps, ML

  14. Sup rad. I tried to add hammer and then upon drag end take the $(“ul:last-child”).parent().prepend($(this)); and yeah… since it’s starting as option markup $(“#cd-dropdown”).dropdown(“open”); won’t fire properly. I’d like to sort of make it where you can drag it like a wheel… the user drags their finger over the surface of the device and then the last LI becomes the first… any thoughts? Anyone??

  15. Hello,

    What if one of the options has a lot of text and wraps to two lines? I’ve gotten it to truncate with ellipsis after it’s been selected, but it needs to display all of the text when the dropdown is expanded. Currently it’s covering up the other options, and doesn’t shrink correctly.

  16. Hi,
    really nice, but doesn’t work on mobile.

    So, this is a bugfix for mobile devices.

    First let me clarify: You make really awesome things which is great, but you unfortunately never follow up on them, like adding features or support. 🙁

    BugFix to get this amazing thing also for mobile:

    “`
    this.selectlabel.on( ‘mousedown.dropdown, touchstart.dropdown’, function( event ) {
    self.opened ? self.close() : self.open();
    return false;
    “`

    2 more things:
    A. As other users also suggested, I would very much like to see a “default item option”

    B. I would as well much suggest you to check first for translate support (using modernizer) and then use transalte3d instead of top. This will result in much smoother results (and is important for mobile) !

    btw: MaryLou: Where did you study cognitive computing ? Was it hard to get accepted for ?