jQuery自定义下拉框选择列表 5款炫酷样式

本文作者html5tricks,转载请注明出处

这是一款基于jQuery的自定义下拉框选择列表插件,利用这款jQuery插件我们可以非常方便的让浏览器默认的select下拉框变的非常华丽,并且同时拥有select下拉框原有的功能。这款jQuery下拉框插件利用了CSS3技术,提供了5款不同的炫酷样式。

jquery-custom-dropdown-list

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

HTML代码:

<div class="wrapper-demo">
					<div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
						<ul class="dropdown">
							<li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
							<li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
							<li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
						</ul>
					</div>
				</div>

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');
				});

			});

在线演示1在线演示2在线演示3在线演示4在线演示5源码下载

热门推荐

jQuery自定义下拉框选择列表 5款炫酷样式》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>