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

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

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

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

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

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

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

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

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

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

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