这是一款使用jquery.dropdown和css3制作的炫酷select下拉菜单美化插件。
注意不是每一个浏览器都支持CSS transforms和transitions。请使用支持它们的浏览器来观看效果。
插件中使用的字体图标是IcoMoon
HTML
先来看一个简单的html结构。
Choose an animal
Monkey
Bear
Squirrel
Elephant
调用方法:
$( '#cd-dropdown' ).dropdown();
如果要应用css transform效果,select下拉菜单的结构如下:
Choose an animal
- Monkey
- Bear
- Squirrel
- Elephant
当我们点击第一个span的时候,将使用jQuery给它的父元素cd-dropdown添加class cd-active,当选择了一个选项,我们将把它插入到select的第一位的位置上。
可用参数
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