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 weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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. Sem dúvida esse e o melhor blog, parabéns MARY LOU pelo tutorial.
    (Undoubtedly this blog and the best, congratulations MARY LOU by tutorial)

  2. Hello Mary Lou, first, thank you so much for your script, it’s really excellent! I’v loved the effects, but could you please tell me if it’s possible to us create a LINK in place to a ? Cos I would like to use it in a login menu with the options “My Profile”, “Logoff”… .
    I was trying to input some javascript in the but it doesn’t work, so could you please help me friend? Thank you again, best regards, Raid

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

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

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

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

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

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