From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.
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.
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.
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.
Check out the demos to see some different configurations in action:
- Demo 1: Gutter of 5, items stacked with an offset
- Demo 2: Like demo 1, but we expand the items with a slight random angle/left values.
- Demo 3: Option items are spread around a circle
- Demo 4: Zero gutter and 3D rotation of the select label when active
- Demo 5: Option items slide in laterally (alternating)
- Demo 6: Same as demo 5 but with a delay
Hope you enjoy this little plugin!
Codrops always has the highest quality css3 + jQuery tutorials. Nicely done and thank you Mary Lou.
Awesome stuff !! obrigado !!
Beautiful!! Such a subtle and delicate effect <3
by the way, the social sharing buttons is missing …
Oh god, very advance usage of CSS 3 animation. Like it very much!
Simply awesome! Thanks a lot!!!!
Very nice effects !
Unfortunatelly, icons don’t appear in Chrome…
wow! Download all the plugins from Codrops!
Damn! So amazing effect!
Thanks everybody! I’m happy you like it 🙂 Cheers, ML
You did amazing drop down menu. Thanks
Very beautiful, nice effect 😀
Brilliantly done congratulations.
Great stuff… Thanks!
Impressive collection, thanks for sharing with us.
So impressive, thank you..
Wow, you guys continue to amaze me with your awesome tutorials. Very valuable information. I’ll be using this to spice up some dropdowns (or select boxes according to W3C) in no time.
Mary Lou makes most beautiful demos! Thank you !
Is it possible to have those effects on a basic menu dropdown instead of a select box ?
This is just awesome. I have always been a fan of mary lou’s work !
Thank you for this beautiful demos/tutorials. I want to grow up to be just like you when i code up. Do you have any suggestions besides studying your code to learn these cool techniques. I know you usually don’t reply but it’s worth a shot. Any books/websites, etc would be very useful to understanding how you do what you do!
Thanks for this great article, will surely use this!
Not seeing icons in chrome? Anyone confirm?
Thanks for the feedback. Can you tell me what OS you’re on? Somebody else already mentioned that.. On Mac and Windows 7 it looks fine. Cheers, ML
Really awesome, Drop-down menu, I have bookmarked this page for some of my projects. AWESOME.
really nice demos… thanks a lot!!
I LOVE this article and I love the designs of the drop down menu. Your site/blog is always inspiring and helpful. I love coming to your site =)
Thanks for sharing. Two thumbs up.
wow! amazing stuff.
Can it is possible to function like select box, i mean when we click on the page the select box will collapse automatically … Pls do so if possible
A jQuery plugin for transforming select inputs into drop-down lists with unique efffects are really amazing.Its a great idea to create drop down list.THANKS to sharing with us
Fantastic. as always. Great work!!!
Wow, you’ve got an eye for design and you develop great pieces!!! Love this site.
Wow really nice effect
Without a doubt, Codrops is THE site for CSS3 and jQuery effects.
Apart from the cutting-edge techniques, the UIs created for the tutorials are always top-level.
In a word: amazing.
Wow, I love demo 2. I’ll certainly use that for my social media 🙂
which version of jquery your plugin is compatible ?
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)
nice,i like it
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”… .
Wooowww very nice!!! o/
WOW very nice 😀
Hi, does this work on websites for mobile UI? Thanks!!