这是一款使用jquery.dropdown和css3制作的炫酷select下拉菜单美化插件。
注意不是每一个浏览器都支持CSS transforms和transitions。请使用支持它们的浏览器来观看效果。
插件中使用的字体图标是IcoMoon
HTML
先来看一个简单的html结构。
<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>
调用方法:
$( '#cd-dropdown' ).dropdown();
如果要应用css transform效果,select下拉菜单的结构如下:
<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>
当我们点击第一个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