Simple Effects for Drop-Down Lists

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

By Manoela Ilic in Playground on
Simple Effects for Drop-Down Lists
Demo Code

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

FBO Particles with Three.js

Progressively Enhanced WebGL Lens Refraction

How to Implement and Style the Dialog Element

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 183

Comments are closed.

  4. It looks good but i want to use it for multiple time in a page but it is on ID based please help me to use it for multiple times
    thanks

  5. I tried this to use in my website, where I need to use the select for more than 2 times. I looked in the JS file and found the code this.inputEl = $( ” ).insertAfter( this.selectlabel ); which is responsible for rendering a hidden input. But when we use multiple select simultaneously how can we change the name to get unique based up on the select’s id or it’s name.

    • You’re right! That was something I forgot. I updated it now. The name for the input will be either the name that is set in the select element (in the HTML), or the ID (in case the name is not specified), or ‘cd-dropdown’ + uniqueID if both id and name are not set. Thanks for the feedback!

    • So I’m still confused as to how I would add additional select box’s

      Do I just change the id names?

    • I am also trying to figure this out…. You can’t change ID’s and changing name does nothing – it always ignores the second select…. please help!

    • Okay figured it out –
      Change ID of second select then add:
      $( '#cd-dropdown' ).dropdown( { gutter : 5 } ); $( '#cd-dropdown2' ).dropdown( { gutter : 5 } );

    • One other thing to consider – if your selects are vertically above each other – the z-index is off and top select goes under the second.

    • Sorry to be such a nag – but there is a big issue when it’s placed in a ‘display:none” – and then “display:block” with jquery slidetoggle… the menu wont open (although all the html is written… 🙁

    • I am still unable to get 2 selects working on the same page. I have tried:

      $( '#cd-dropdown' ).dropdown( {
      gutter : 5
      } );
      $( '#cd-dropdown2' ).dropdown( {
      gutter : 5
      } );

      I have also tried using the select names values but it will display the first dropdown but not the second one!

  7. I like demo 2 and 6. People that create stuff like this are awesome. Thank you for existing.

  8. Plugin’s fine.

    But its hard to implement in live. while assigning events we should use click() ,bind(), live ()on “li”. We cant use change() function. Also we cant give default option dynamically. We should use “-1” for make it default. Also we did not get any attributes of options. Please think in that way.
    In some situations we need to generate select box dynamically. Make it flexible on those places.

    Please make it work on live situations.

    Thank You

  9. You guys introducing awesome plugins.

    But users need some more explanation such as supporting versions, limitations etc.

    For example the plugin only will work fine if use some CSS or else it shows simple list.
    Just tell them what they need and where to place also.

    Thanks

  10. Is there any way to make one of the options as default selected option ?
    And if i select the same option more than once its throwing an error (please check in firebug).

    Thanks

  12. Ohhh! This is awesome!! The coolest dropdown I ever saw!! You rock!!!! I’ve learned a lot and seen here very cool stuff so far the best website for resources and learning cool stuff! I’ve build my website on a tutorial from here as well 🙂

  13. Wow Wow Wow!!!

    This is fresh! Mary Lou you keep killin em with these tuts.

    I read/follow all the ‘regular’ design blogs. A lot of the articles are good but Codrops does it for me. Your techniques and demos are always so fresh. Awesome, just awesome! Codrops is definitely one of my favorite go-to spots for inspiration.

    Big props.

  16. First of all, that’s some nice effect you have achieved. Gratz.
    I really liked it, so, I’m trying to use it in one of my projects. I have 2 selects, one underneath the other,
    the problem is, when I click the first select, its options render behind the other select, I’m trying to fix it, but without success.
    Could you give me a hint?
    Thank you.

  19. This is such a great plugin. I’m already using it on one of my projects. Quick question. Anyway you can target the selector change like jQuery’s .change function? I’d like to dynamically show/hide fields based on the selection, but can’t figure out how to grab the value of the hidden input on change.

    • Just in case anyone is curious. You can alter the plugin to include an id on the hidden field, and use jQuery to listen for the change in value. Great dropdown!

  20. Looks sweet, but if you press f5 in Chrome you’ll see that the dropdown menu has to reload the css a bit later. You see the dropdown first without layout.

    • Wow, I just said that. There are times when glitches can be left since most may not even notice… I think this is not one of those situations

  22. I notice there is a millisecond or so’s flash of the naked underlying dropdown form. Shouldn’t this be preloaded since I assume it would be a likely object a user would click?

  25. I am having trouble getting multiple dropdowns to work. I have different ID’s and name attributes on each field. I also tried using the same class or different classes on each field but neither works for me 🙁 Does this plugin only support 1 field?

    • don’t us ids. Multiple ids on the same page doesn’t work, change your ids to classes

  26. Hy,
    I try to use this plugin to make a menu, but I can’t managed to create a redirection to the other pages of my website.

  27. Hi, i implemented this plugin into a cshtml mvc, .net4 site, and i need to run an autopostback on the which doesnt work.

    I also tried adding the postback in the jquery but that doesnt work either, any idea how i can achieve this. TYhe autopopstback does work when i remove the cd-dropdown id from the select. But that removes all styling.

    Thanks

    • yes, just change your ids to classes. You can’t use multiple ids on the same page

    • Exactly what I was thinking! this is a great looking dropdown style and would be even more awesome if I could implement in a navigation element. I never tried but I think if I just create the navigation element with same structure as the ul, li has after applying the .dropdown() method to the select element and then add the css stuff, it might work. dont you think? @erik

    • Greetings. Help me.
      How do I make a similar effect to the site menu.
      3 tormented day. I would be very grateful if you came and you can help me.

  30. Hi MARY LOU.
    Open Open Close
    When I get to the data from the database, and I want he is selected by default.
    But it can not modify the value (-1), if you do not change, submit the form will be submitted to “-1”.

  34. This is very inspiring demo thanks for sharing. I’ve tried in ie10, 9 and 8. Its quite legacy-proof work 🙂

  35. Hi, I really like the effect. I was just wondering if you could help me out in getting this to work. Im totally new with jquery and i dont know what I’m supposed to be doing with the .js file? Should i be putting it in the same folder that my style.css resides and then calling it by $( ‘#cd-dropdown’ ).dropdown();

    ?

    Any help would be so much appreciated! Thanks guys!

    • Hello bro. Look, you can put your .js file anywhere. But I like to make a folder named “js” in which I put .js files.
      Example: CLICK HERE

  37. Hi! I’m an artist creating my own site (www.renearreola.com). I really like the simple drop down menu, but I’m a total newbie to jQuery, etc. As you can see, I’ve got my homepage working with a nivo slider and the codrop menu. But, how do I make it so that when one of the drop down menu categories is clicked, it switches over to that page? For example, if I click on the “Home” button and the menu activates and drops, then I click on “Gallery”, how do I get my Gallery page to show up??

  38. The dropdown list are pretty cool I use prototype and jquery with no conflict I tried to take a took at your code and really like how you could manage the styling.

    But there is a thing:

    1) when the select boxes are into a display:none overlay and then the overley is displayed display:block the select fields are without the style effect.

    Is there a way to refresh the construction?

    2) when using more than one select boxes the z-index must be set always to something like z-index:9999; in .cd-dropdown ul {….. to prevent the lists to display the content behind the above select box.

    This I have fixed manually with CSS3.

    3) Using id= *** is a good idea but there is no way to use a class instead of id= ***. A classname for all select name more sense that creating lot of unnecessary code.

    now it is :

    $(‘#cd-dropdown’).dropdown( {
    gutter : 5,
    stack : false,
    slidingIn : 100
    } );

    a better aproach will be using classnames as triggers

    $(‘.cd-dropdown’).dropdown( {
    gutter : 5,
    stack : false,
    slidingIn : 100
    } );

    This way using .each will create all select boxes with a specific style gutter stack slidingIn etc…

    I hope you can include this in your next update!

    Best regards
    Andre’s

    • andre… i have a small doubt can u help me…

      in the dropdown above, can u tell me how to access the value of selected option. due to css i am unable to access selected value.

  40. Hi,

    I converted demo1 to a regular menu-dropdown or accordion. You can find it on jsfiddle here

    At the moment it works on classname and I did not have the time to make it work with multiple instances.

  43. Sorry,I don’t know how to insert code in a comment >_<……..
    if( val !== -1 ) { optshtml += classes !== undefined ? '' +'<a href="'+val +'" rel="nofollow">' + '' + label + '</a>' : '' +'<a href="'+val +'" rel="nofollow">' + '">' + label + '</a>'; }

  44. I like the plugin but I cannot listen change event like

    $(“.cd-dropdown”).change(function() {
    // do something
    });

    where

    ..
    ..

    but change event never fires.. any idea?

  45. how can i do the onclick on the item and navigate to other website?
    I try to modify the method “onOptionSelect” in the jeruqy.dropdown.js TO

    onOptionSelect : function(opt) { window.location.href=opt.val(); }

    But cant work ?? PLLSSS HELP~

  46. Hi!
    I’m new to this area, and hoping you wonderful people could help me 🙂 It will really be appreciated!
    I’m using wordpress with a child theme. In my child themes functions.php i’ve tried the following:

    <?php add_action( 'wp_enqueue_scripts', 'load_javascript_files' ); function load_javascript_files() { wp_register_script( 'jquery.dropdown', get_stylesheet_directory_uri() . '/js/jquery.dropdown.js', array('jquery'), true ); wp_register_script( 'modernizr.custom.63321', get_stylesheet_directory_uri() . '/js/modernizr.custom.63321.js', array('jquery.dropdown'), false ); wp_enqueue_script( 'jquery.dropdown' ); wp_enqueue_script('modernizr.custom.63321');}

    Then added this in my header, just before the :

    $(document).ready(function() { $( '#cd-dropdown' ).dropdown( { gutter : 5 } ); ?>

    Then i called the function in my footer, where i want the dropdown:
    Choose an animal Monkey Bear Squirrel Elephant

    • Sorry, some code seems to be missing. There is of course an }?> in my functions.php.

      I added this

      $(document).ready(function() {
      $( ‘#cd-dropdown’ ).dropdown( {
      gutter : 5
      } );

      just before the wp_head hook.

      Then i called the function in my footer, as it written on this page.

  47. Did this work as a regular URL somehow? Like the suggested (but not sure how to correctly put them into the footer code):
    “if( val !== -1 ) {
    optshtml +=
    classes !== undefined ?
    ” +’‘ + ” + label + ‘‘ :
    ” +’‘ + ‘”>’ + label + ‘‘;
    }”

    Not even sure how to do this for the script… hmmm. I just need them to pop out as lightboxes if possible.

  48. Hello, first excuse me but my english is bad….
    I found this in google world ¡ 😀 but i think if the menu can be dropUp not dropDown and how i can do this ? Thanks for all.