html5下拉菜单清除样式,jQuery自定义下拉框选择列表 5款炫酷样式 | HTML5资源教程...

这是一款基于jQuery的自定义下拉框选择列表插件，利用这款

我们对其中一个的实现代码进行简单讲解，代码主要由HTML、CSS和jQuery组成。

HTML代码：

CSS代码：

.wrapper-dropdown-2 { /* Size and position */ position: relative; /* Enable absolute positionning for children and pseudo elements */ width: 200px; margin: 0 auto; padding: 10px 15px; /* Styles */ background: #fff; border-left: 5px solid grey; cursor: pointer; outline: none;}.wrapper-dropdown-2:after { content: ''; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: grey transparent;}.wrapper-dropdown-2 .dropdown { /* Size & position */ position: absolute; top: 100%; left: -5px; right: 0px; /* Styles */ background: white; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; list-style: none; /* Hiding */ opacity: 0; pointer-events: none;}.wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #333; border-left: 5px solid; padding: 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}.wrapper-dropdown-2 .dropdown li:nth-child(1) a { border-left-color: #00ACED;}.wrapper-dropdown-2 .dropdown li:nth-child(2) a { border-left-color: #4183C4;}.wrapper-dropdown-2 .dropdown li:nth-child(3) a { border-left-color: #3B5998;}.wrapper-dropdown-2 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle;}/* Hover state */.wrapper-dropdown-2 .dropdown li:hover a { color: grey;}/* Active state */.wrapper-dropdown-2.active:after { border-width: 0 6px 6px 6px;}.wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto;}

jQuery代码：

function DropDown(el) { this.dd = el; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); event.stopPropagation(); }); } } $(function() { var dd = new DropDown( $('#dd') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-2').removeClass('active'); }); });