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 monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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:

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

Receive our bi-weekly Collective or official newsletter right in your inbox.

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

  2. 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

    • 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});

  3. how can i close this drop down list onblur() .I want that when i click outside the dropdown list the list will close.

    • 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

  4. 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.

  5. 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?

  6. 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.

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

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

  8. 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.

  9. 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

  10. 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

  11. 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”

  12. 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!

    • Sorry I mistype the option tag:

      It should look like:

      <option value="custom_url" class="icon-monkey">Monkey</option>

      Regards

    • 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