整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
下拉列表select在表單中應(yīng)該算是使用頻率比較高的一個元素，而我們也知道頁面上默認的select標(biāo)簽樣式是很難看的。基本所有的團隊都會選擇使用Bootstrap或者自己封裝一個下拉列表的組件，今天我們也試著使用CSS3新特性來寫一個帶動畫效果的下拉列表樣式吧。
CSS3
感興趣的可以自行去github上學(xué)習(xí)源碼，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我們來看看帶動畫效果的下拉列表效果是什么樣的，如下圖所示。
效果圖
這里我們簡單分析下頁面的構(gòu)成，實際上非常的簡單，主要包含以下三個元素。
表示外層容器的div元素
上面是一個span元素
下面是一個ul元素，每個li表示一個列表項
在整個下拉列表中，主要有兩個動畫。
下拉菜單旁邊的小三角圖標(biāo)，在鼠標(biāo)懸浮和離開時動態(tài)變換
下方的列表，在鼠標(biāo)懸浮和離開上面的span元素時，列表會有動畫顯示和消失的效果。
下面我們來看看整個頁面的代碼構(gòu)成。
HTML
首先是頁面的HTML代碼，正如上一部分所講，頁面主要為一個外層容器div，內(nèi)部是一個span和ul元素，每個列表項li內(nèi)包含一個a元素，所有HTML部分代碼如下所示。
HTML代碼
CSS
CSS部分的代碼才是整個實現(xiàn)效果的核心，我們具體來分析。
首先是頁面的全局基本配置樣式。
全局配置
然后是外層容器的樣式。
外層容器樣式
然后是span元素的樣式，旁邊的上三角形通過偽元素::after來實現(xiàn)，在::after偽元素中通過border-color屬性來控制三角形的朝向，然后通過transition屬性設(shè)置變換樣式。
span元素以及上三角形
當(dāng)鼠標(biāo)停留在span元素上時，span元素背景色會改變，上三角會變成下三角。
鼠標(biāo)停留后span的樣式
緊接著是下面的ul以及l(fā)i元素的樣式，都是一些很普通的屬性。
ul與li樣式
然后是li下的a元素的樣式。
li下a元素樣式
然后是css中最核心的地方，ul的動畫效果，通過translate3d屬性改變ul所處的位置，再以transform屬性添加動畫效果。
ul初始狀態(tài)
至此，所有代碼講解完畢，如果運行成功后，會得到文章開始時的下拉列表效果。
本篇文章主要給大家介紹了如何使用CSS編寫一個帶動畫的下拉列表效果，你學(xué)會了嗎？
文代碼的動畫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>44-jQuery 下拉菜單</title>
<style type="text/css">
*{ /* 通配選擇器*/
margin: 0; /*外邊距：0*/
padding: 0; /*內(nèi)邊距：0*/
}
.daohang{ /* 導(dǎo)航樣式*/
width: 80%; /*寬：80%*/
height: 40px; /* 高：40像素*/
border: #000000 solid 1px; /*邊框：黑色 實線 1像素*/
background-color: chartreuse; /*背景顏色*/
border-radius: 10px; /*圓角：10像素*/
margin: 10px auto; /*外邊距：上10像素 左右居中*/
}
.daohang>li{ /* 導(dǎo)航里面的li標(biāo)簽樣式*/
float: left; /*浮動：左浮動*/
list-style: none; /*去除前面的點*/
/* border: #000000 solid 1px; */
background-color: #FFA500; /*背景顏色*/
width: 15%; /*寬：15%*/
height: 100%; /*高：100%*/
border-radius: 10px; /*圓角：10像素*/
margin-left: 4%; /*外左邊距：4%*/
text-align: center; /*文字居中*/
line-height: 35px; /*行高：35像素*/
}
.sub>li{ /* 二級菜單里的里標(biāo)簽樣式*/
list-style: none; /*去除前面的點*/
font-size: small; /*字體大?。盒?/
background-color: #8B008B; /*背景顏色*/
border: #000000 solid 1px; /*邊框：黑色 實線 1像素*/
border-bottom: none; /*下邊框：空*/
margin-top: 5px; /* 上邊距：5像素*/
}
.sub>li:hover{ /* 二級菜單里面的li標(biāo)簽的鼠標(biāo)停留*/
background-color: red; /*背景顏色：紅色*/
}
.sub{ /* 二級菜單樣式*/
display: none; /*隱藏*/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
// 定義變量 裝 二級菜單的代碼
var $sub=$('<ul class="sub"><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li><li>二級菜單</li></ul>')
// 導(dǎo)航ul里面的li標(biāo)簽的移入移出事件
$(".daohang>li").hover(function(){
$(this).append($sub) // 為現(xiàn)在這個li標(biāo)簽添加二級菜單
$(".sub").stop() // 停止二級菜單的動畫
$(".sub").slideDown(1000) // 用一秒的時間展開二級菜單
}, function(){ // 移出事件
$(".sub").stop() // 停止二級菜單的動畫
$(".sub").slideUp(100) // 用100毫秒的時間收起二級菜單
})
})
</script>
</head>
<body>
<ul class="daohang"> <!-- 導(dǎo)航ul -->
<li>第一個 <!-- li標(biāo)簽 -->
<!-- <ul class="sub1">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul> -->
</li>
<li>第二個</li> <!-- li標(biāo)簽 -->
<li>第三個</li> <!-- li標(biāo)簽 -->
<li>第四個</li> <!-- li標(biāo)簽 -->
<li>第五個</li> <!-- li標(biāo)簽 -->
</ul>
</body>
</html>
ss實現(xiàn)常用下劃線導(dǎo)航動畫下拉菜單效果，看效果
鼠標(biāo)經(jīng)過后，下劃線由中間像兩邊擴散，下拉框由下往上出現(xiàn)！
代碼：
css:
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
