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: monday.com is the last team management and design process tool youโ€™ll ever need. 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 is very inspiring demo thanks for sharing. I’ve tried in ie10, 9 and 8. Its quite legacy-proof work ๐Ÿ™‚

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

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

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

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

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

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

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

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

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