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

首先來看看要實(shí)現(xiàn)的效果圖
想要制作這么一個(gè)效果還是比較麻煩的,但是代碼并不難理解。
首先,來看看 Html 代碼。
- <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 代碼。
- * {
- 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。
- <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 元素的字體和字體大小,顏色。
- .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è)效果。
- .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。
- .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)鍵所在。
- @-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 代碼,不再解釋。
- .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。
- <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
下面就可以使用 JQuery 了。
- <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í)或者工作帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
jquery+css實(shí)現(xiàn)的ul+li模仿下拉框表單美化效果源碼
jquery+css實(shí)現(xiàn)的ul+li模仿下拉框表單美化效果源碼,是一款利用DIV+CSS及jquery實(shí)現(xiàn)的下拉框表單美化特效源碼,需要此段代碼的朋友們可以前來下載使用2014-11-21HTML5+CSS3實(shí)現(xiàn)的自定義下拉框菜單效果源碼 3D卡片折疊動(dòng)畫
今天要分享的一款CSS3自定義下拉框取代了傳統(tǒng)的Select樣式,用不一樣的風(fēng)格來讓select更加美觀。這款CSS3下拉框還有3D立體的卡片折疊動(dòng)畫效果,非常酷2014-11-07CSS美化下拉框select在火狐和谷歌瀏覽器下已測(cè)試
本示例要模仿的是下拉框,經(jīng)過美化的偽下拉,右邊的小三角是用css3實(shí)現(xiàn)的,鼠標(biāo)經(jīng)過的時(shí)候有旋轉(zhuǎn)特效2014-05-138款精美的CSS3表單設(shè)計(jì)(登錄表單/下拉選擇/按鈕附演示及源碼)
接下來向大家分享8款精美的CSS3表單設(shè)計(jì),表單內(nèi)容包括登錄表單、下拉選擇、按鈕等,并且每一個(gè)表單都有演示和源碼下載,如何你對(duì)此感興趣的話,就趕緊收藏他們吧,希望本2013-02-04- 這是一套使用純CSS3制作的帶下劃線跟隨效果的下拉菜單特效的代碼,通過CSS3 transform和transition來制作。歡迎下載使用2016-10-17
- 本文給大家介紹css代碼去掉select的下拉箭頭樣式的方法,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2016-09-02
- 這篇文章主要為大家詳細(xì)介紹了CSS下拉菜單簡(jiǎn)單制作教程,鼠標(biāo)移動(dòng)到指定元素上會(huì)出現(xiàn)下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-05
- 這篇文章主要為大家詳細(xì)介紹了CSS3美化表單控件的技巧,美化下拉控件、單選框、復(fù)選框,感興趣的小伙伴們可以參考一下2016-06-29
- 這篇文章主要告訴大家如何打造最美CSS多級(jí)下拉橫向?qū)Ш讲藛涡Ч哂幸欢ǖ膮⒖純r(jià)值,感興趣的小伙伴們可以參考一下2016-06-27
- 這篇文章主要介紹了CSS3制作炫酷的下拉菜單及彈起式選單的實(shí)例分享,當(dāng)然菜單上如果要實(shí)現(xiàn)更多動(dòng)態(tài)效果的話還是需要JavaScript的幫助才行,需要的朋友可以參考下2016-05-17