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 November 29, 2012

Demo Code

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

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.

3d dropdown

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ¹⁸³

Comments are closed.

Ankit Kumar Chauhan March 4, 2013 at 08:50

effect looks awesome. nice work
Tharun March 18, 2013 at 22:19

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.
Daniel March 22, 2013 at 18:43

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?
SEKHAR March 26, 2013 at 16:54

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.
Veeru March 29, 2013 at 07:05

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")); } }); });
Tim April 2, 2013 at 20:06

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 …
andrew April 2, 2013 at 20:47

That’s awesome! Very nice!
Matt April 5, 2013 at 21:08

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;
Kash April 6, 2013 at 18:08

Awesome!!!
mzrd April 8, 2013 at 13:17

The demo 2 effect is just awesome. Thank you for keeping this incredible website.
Uoster April 10, 2013 at 16:30

Nice works!
I have a simple question (dumb question):
– How i put link in this stuff?
Arjun April 11, 2013 at 13:25

I loved this tutorial but I have a question !
Is there anything we can do to add particular URLs to drop-down items … :/ ???
- Eduardo April 21, 2013 at 17:32
  
  Hi there, did you resolve how to put urls? Thanks
Mikko April 17, 2013 at 00:55

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. 😀
- Mikko April 17, 2013 at 00:58
  
  By the way I’m using the demo 4. 🙂
Eduardo April 21, 2013 at 17:31

Amazing tutorial, i just wonder how you make buttons work with links to another websites, thanks for your help
Mikko April 22, 2013 at 08:46

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. 🙂
- Mikko April 22, 2013 at 08:47
  
  Sorry…
  
  The “index4” is the name of the domain, where the drop down menu is located.
Mary Lou April 24, 2013 at 10:43

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
- WSH May 23, 2013 at 09:19
  
  I tried your instruction and it does’t work for me. Is there anything I overlooked?
  Thanks
- Mary Lou May 23, 2013 at 13:13
  
  It should work! Example: http://tympanus.net/Development/SimpleDropDownEffects/redirecting.html Cheers, ML
dapinitiaL April 30, 2013 at 01:48

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??
As May 8, 2013 at 20:08

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.
VanillaThunder May 15, 2013 at 23:36

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 ?
Jaley May 23, 2013 at 12:08

Amazing, simply amazing 🙂
james oxford June 2, 2013 at 19:31

This only works if there is only one per page as it hijacks the id=”” that i need to send in POST. I want to use this on a page where you send back selection from 5 boxes.
Liam Dutton June 3, 2013 at 13:10

Hi,

Loving the plugin, it is sooooo good…but…..I am trying to use more than 1 on 1 page and they stack underneath each other ( its for a product page on an ecommerce site I am working on, I have played around with the z-index values but cant seem to get it to function properly.

I am not 100% competent or confident re-writing jquery and wondered if someone could lend a helping hand??

Thanks
- Daniel June 27, 2013 at 13:39
  
  I have the same problem. Did you solved it?
- Scott July 30, 2013 at 21:15
  
  You can alter the plugin to allow for a default z-index which will allow you to place multiple on the page and position them in layers.
  
  In the jquery.dropdown.js file, alter the options section ($.DropDown.defaults) by changing this (about line 35):
  slidingIn : false,
  onOptionSelect : function(opt) { return false; }
  to:
  slidingIn : false,
  defZIndex : 1000,
  onOptionSelect : function(opt) { return false; }
  
  Then change the _layout section line from:
  this.minZIndex = 1000;
  to:
  this.minZIndex = this.options.defZIndex;
  
  Now you are able to call your multiple dropdowns like this:
  
  $( ‘.cd-dropdown’ ).dropdown({defZIndex: 2000});
  $( ‘.cd-dropdown2’ ).dropdown({defZIndex: 1500});
waleed June 5, 2013 at 12:31

how can i close this drop down list onblur() .I want that when i click outside the dropdown list the list will close.
vineet kumar June 15, 2013 at 13:05

how to navigate url on click from the dropdown???
- Narendran June 20, 2013 at 14:12
  
  for .Net developers
  
  U can do, by writing the code in selectedindex of dropdown r dropdownlist.
  
  if(drpid.selectedindex==0)
  {
  response.redirect(“page1.aspx”);
  }
  else if(drpid.selectedindex==1)
  {
  response.redirect(“page2.aspx”);
  }
  else if(drpid.selectedindex==2)
  {
  response.redirect(“page3.aspx”);
  }
  
  and so on.
  
  Thanks
  Narendran N
  4naren.blogspot.in
Luca June 19, 2013 at 09:48

Great simple dropdown plugin, I’m using it on my new project. Just one problem though: there’s no way of going back to the original dropdown state (cancel the current selection). I’m using it on a filter-like dropdown (all/kind1/kind2/kind3/ecc.), so it would be great to be able to go back to the “all” (original) selection.
Narendran June 20, 2013 at 14:08

Awesome design……keep rocking
Tommy Stephansen June 22, 2013 at 18:45

Hi, great stuff, but there’s one missing feature. When clicking outside the box, I want it to hide the menu, like a few others have noted, this is not implemented in any way (have to click ON the box). Any tips?
Guillermo Diaz June 24, 2013 at 21:05

Thanks for the post, is awesome!
Ryan July 3, 2013 at 20:11

Does anyone know how to get the dropdown to start when the page loads?
Concepto Azul July 4, 2013 at 00:49

Grand ayuda!!!..muy bueno
Blue July 5, 2013 at 16:50

Problem with Z-INDEX if use more select!!
Saurav Chaudhary July 13, 2013 at 09:26

I want to insert a scrollbar in this selectbox using the plugin mcustomscrollbar. However I couldn’t so I wrapped the select tag with a div and applied the scroll plugin but then the select box dowsn’t expand. Please help, I want a custom scrollbar in the selectbox.
Josesc July 13, 2013 at 12:11

Please,
How to set dropdown opened when page is loaded?
This code does not work for me.

$( document ).ready(function() {
$( ‘#cd-dropdown’ ).open();
});
Sid July 15, 2013 at 10:13

How can i add links to the option values? I want use anchor links in my blog posts (somewhat like table of content in Wikipedia) using your drop down.
Christoph Rumpel July 25, 2013 at 13:55

Thx for the plugin. I am also using several of these menus on a site and i would like to close the others when i open another one.
Is it possible to call the functions close and open of a certain dropdown menu?

Thx and cheers
sajhd July 25, 2013 at 15:38

How do can you style/ remove the vertical bar before the dropdown arrow?
Vlad July 28, 2013 at 19:04

Thank you so much for a great plugin,just what i need for my next project.
Jami July 31, 2013 at 09:13

Great design, unfortunately it’s quite a pain to implement in my case: I want a drop down to display all the icons in FontAwesome, and I don’t want to include tons of new files just to implement this. The plugin keeps showing console errors, css files not found, modernizr not found. I don’t want to use modernizr since this is for a WP admin drop down. A minimal version with simple styling would be great
Barnaby August 7, 2013 at 18:38

Hi, nice dropdown but could someone tell me how to get the value of the selected element in javascript/jquery? I tried document.getElementById(“cd-dropdown”) but got the error “cannot read property of undefined”
RaulC August 14, 2013 at 20:52

Hi there! I finally did link menu options to URL!

As Mary Lou wrote, we first need to use value=”” under option tag

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

And then call the plugin with:
$( '#cd-dropdown' ).dropdown( { gutter : 3, onOptionSelect : function(opt) { window.location = opt.data( 'value' ); } } );

I think Mary Lou code didn’t work because of the spaces between “opt” and parentheses in funtion(opt).

Anyway, it’s working for me like a charm!
- RaulC August 14, 2013 at 20:55
  
  Sorry I mistype the option tag:
  
  It should look like:
  
  <option value="custom_url" class="icon-monkey">Monkey</option>
  
  Regards
- Mandy November 23, 2013 at 14:39
  
  Hi RaulC,
  I tried your code and it didn’t work for me.
  I would like to keep the styling and just add url links on click. But when I add your plugin code:
  
  $( ‘#cd-dropdown’ ).dropdown( {
  gutter : 3,
  onOptionSelect : function(opt) {
  window.location = opt.data( ‘value’ );
  }
  } );
  
  It just changes the styling and goes to an old school drop down list and the links don’t work.
  ——————————————————————————————
  I’ve even changed it to this:
  $( ‘#cd-dropdown’ ).dropdown( {
  gutter : 3,
  urlmenu.onchange = function() {
  window.open( this.options[ this.selectedIndex ].value );
  
  But no luck.
  Can someone pretty please help me add the url links on click. Thanks a million.
  Mandy
Yuri Leite September 2, 2013 at 14:46

Hello how do I put two menu with different subject on the site? I tried to copy the HTML the second does not work.
Andi September 4, 2013 at 20:52

Hello ! How can I put this ( demo 1 ) into my wordpress page ? please help me, thanks : )
Ricardo September 11, 2013 at 00:08

Great plugin!! But, how to remove or custom the arrow icon?!
Maki Myers September 25, 2013 at 23:27

Hi there,

Amazing plugin, thanks so much 🙂

I’m having trouble activating the chosen option when integrated into WordPress – Woocommerce 2.0 product filter. It all seems to work fine in terms of appearance, when an option is clicked the value is selected but no refresh/trigger is happening :S – am I missing something simple?

Is it something to do with the ‘<option value= ' .. being turned into '<li data-value=' ?

Many thanks in advance to anyone who can shine some light on this.
Ben October 14, 2013 at 08:20

Hi, nice work.
But is it possible to hide the menue on clicking outside the box?

Thx and cheers
carlos October 23, 2013 at 09:51

hello, how do i add more icons than the ones provided? thanks
BoR'hèn November 17, 2013 at 10:49

Hello ! How can I put this ( demo 4 ) into my blogger page ? please help me, thanks : )
vivvvi May 8, 2015 at 15:01

I’ve tried a few things, but has anyone thought about how this could be styled to ‘drop’ up rather than down?

Nice work Mary Lou

Options

Demos

Manoela Ilic

Coding the Sliced Image Hover Effect from Quai Network

How to Code the K72 Marquee Hover Animation

On-Scroll Animation and View Switch

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

Feedback 183

Feedback ¹⁸³