利用CSS實(shí)現(xiàn)酷炫的下拉框特效

發(fā)布時(shí)間：2016-10-20 17:26:40 作者：佚名

我要評(píng)論

這篇文章給大家介紹的是一個(gè)利用CSS實(shí)現(xiàn)的酷炫的下拉框，實(shí)現(xiàn)后效果真的非常不錯(cuò)，文中給出了詳細(xì)實(shí)現(xiàn)過程和示例代碼，感興趣的朋友們下面來一起看看吧。

首先來看看要實(shí)現(xiàn)的效果圖

想要制作這么一個(gè)效果還是比較麻煩的，但是代碼并不難理解。

首先，來看看 Html 代碼。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div class="container">
<div class="heading">
<h2>Custom Select</h2>
</div>
<div class="select">
<p>Please select</p>
<ul>
<li data-value="HTML5">HTML5</li>
<li data-value="CSS3">CSS3</li>
<li data-value="JavaScript">JavaScript</li>
<li data-value="JQuery">JQuery</li>
<li data-value="Backbone">Backbone</li>
</ul>
</div>
</div>

可見，我們并沒有利用原生的 select 元素，而是利用其它元素來模擬這個(gè)效果。我們?yōu)?li 元素指定了 data-value,主要是接下來我們會(huì)用 JQuery 獲取選中值并將其放置到 p 元素下。

下面逐步來看 CSS 代碼。

CSS Code復(fù)制內(nèi)容到剪貼板

* {
margin: 0;
padding: 0;
}
html {
font-family: 'Terminal';
font-size: 62.5%;
}
body {
background-color: #33CC66;
}

1、將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設(shè)置為 0。

2、將網(wǎng)頁中的默認(rèn)字體設(shè)置為 Terminal，字體大小設(shè)置為 62.5%, 也就是 10px。

3、設(shè)置背景顏色為 #33CC66。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<link href='http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis' rel='stylesheet' type='text/css'>

上面我們用到了 Terminal 字體，而且接下來我們還會(huì)使用 Lobster 字體，所以用這行代碼添加引用。

1、指定 headng, select 寬度并指定其水平居中。

2、修改 heading 的寬度，主要是為了讓其寬度大于 select 的寬度，顯得更加美觀。然后指定其上外邊距和下外邊距。

3、設(shè)置 heading 下 h2 元素的字體和字體大小，顏色。

CSS Code復(fù)制內(nèi)容到剪貼板

.select > p, .select ul {
background-color: #ffffff;
font-size: 2rem;
border: 1px solid bisque;
border-radius: 5px;
margin-bottom: 0;
}
.select > p {
text-align: left;
padding: 1rem;
position: relative;
border-bottom-rightright-radius: 0;
border-bottom-left-radius: 0;
cursor: pointer;
color: rgba(102, 102, 102, .6);
}
.select > p:after {
display: block;
width: 10px;
height: 10px;
content: '';
position: absolute;
top: 1.4rem;
rightright: 2rem;
border-bottom: 1px solid #33CC66;
border-left: 1px solid #33CC66;
transform: rotate(-45deg);
transition: transform .3s ease-out, top .2s ease-out;
}

1、設(shè)置 p 和 ul 元素的背景顏色和邊框等設(shè)置。

2、為 p 元素單獨(dú)指定樣式，并設(shè)置其 position 屬性，主要是為了下面繪制右側(cè)的下拉按鈕。

3、利用 :after 在p 元素的右方繪制下拉按鈕，可以看出來，我們是利用左下邊框然后旋轉(zhuǎn) -45 度模擬的這個(gè)效果。值得注意的是，我們需要將其 display 設(shè)置為 block，并且設(shè)置寬高，否則看不到這個(gè)效果。

CSS Code復(fù)制內(nèi)容到剪貼板

.select ul {
margin-top: 0;
border-top-left-radius: 0;
border-top-rightright-radius: 0;
list-style-type: none;
cursor: pointer;
overflow-y: auto;
max-height: 0;
transition: max-height .3s ease-out;
}
.select ul li {
padding-left: 0.5rem;
display: block;
line-height: 3rem;
text-align: left;
}

1、設(shè)置 ul 的一些默認(rèn)屬性，并將其設(shè)置最大寬度為 0，指定 overflow-y 為 auto ，這個(gè)時(shí)候ul 將會(huì)被隱藏。

2、在這里設(shè)置的時(shí)候我遇到了一個(gè)問題，就是 li 標(biāo)簽始終占不滿 ul 的一行，那是因?yàn)槠淠J(rèn)有 margin 和 padding ，所以在一開始的時(shí)候就將網(wǎng)頁中所有元素的外邊距和內(nèi)邊距設(shè)置成了 0。

CSS Code復(fù)制內(nèi)容到剪貼板

.select.open ul {
max-height: 20rem;
transform-origin: 50% 0;
-webkit-animation: slide-down .5s ease-in;
}
.select.open > p:after {
position: absolute;
top: 1.6rem;
transform: rotate(-225deg);
transition: transform .3s ease-in, top .2s ease-in;
}

1、為 open 設(shè)置最大高度，并為其指定動(dòng)畫效果。

2、將下拉按鈕旋轉(zhuǎn) -225 度，并為其指定動(dòng)畫。

下面我們看看為 ul 元素指定的 slide-down 動(dòng)畫效果，這也是這個(gè)下拉特效的關(guān)鍵所在。

CSS Code復(fù)制內(nèi)容到剪貼板

@-webkit-keyframes slide-down {
0% {
transform: scale(1, 0);
}
25% {
transform: scale(1, 1.25);
}
50% {
transform: scale(1, 0.75);
}
75% {
transform: scale(1, 1.1);
}
100% {
transform: scale(1, 1);
}
}

看到以上代碼可能就都明白了，就是不斷改變 ul 的大小，讓其在 0.75-1.25 之間進(jìn)行縮放，所以就會(huì)有那個(gè)跳動(dòng)的效果了。

下面還有一些簡(jiǎn)單的 CSS 代碼，不再解釋。

CSS Code復(fù)制內(nèi)容到剪貼板

.select ul li:hover {
background-color: rgba(102, 153, 102, 0.4);
}
.select .selected {
background-color: rgba(102, 153, 102, 0.8);
}

CSS 講完了，下面就可以看看我們是如何利用 JQuery 控制這個(gè)效果的。

我們并不需要下載 JQuery 就可以使用，因?yàn)楝F(xiàn)在已經(jīng)有很多網(wǎng)站提供了 CDN 服務(wù)，比如我使用的 BootCDN。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

下面就可以使用 JQuery 了。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<script>
$(document).ready(function () {
$('.select ul li').on("click", function (e) {
var _this = $(this);
$('.select >p').text(_this.attr('data-value'));
$(_this).addClass('selected').siblings().removeClass('selected');
$('.select').toggleClass('open');
cancelBubble(e);
});
$('.select>p').on("click", function (e) {
$('.select').toggleClass('open');
cancelBubble(e);
});
$(document).on('click', function () {
$('.select').removeClass('open');
})
})
function cancelBubble(event) {
if (event.stopPropagation) {
event.preventDefault();
event.stopPropagation();
} else {
event.returnValue = false;
event.cancelBubble();
}
}
</script>

1、首先為 p 標(biāo)簽綁定 click 事件，在觸發(fā)的時(shí)候，為 select 添加或移除 open class, 也就是將 ul 顯示出來。

2、為 li 綁定 click 事件，當(dāng)選中了一個(gè) li 元素的時(shí)候，首先獲取到 data-value，然后將其賦值給 p 標(biāo)簽，然后為選中的 li 添加 selected class,與此同時(shí)利用 siblings() 方法，讓兄弟節(jié)點(diǎn)的 selected class 移除。

3、為 document 設(shè)置click 事件，當(dāng)我們點(diǎn)擊網(wǎng)頁中任何一處地方的時(shí)候，如果 ul 是打開的，就將其關(guān)閉，不過這個(gè)時(shí)候由于所有元素都在 document 內(nèi)，所以我們需要阻止事件冒泡，調(diào)用自己寫的 cancelBubble() 方法。

總結(jié)
好了，本文的內(nèi)容到這就基本介紹了，希望能對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。