整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
下拉列表select在表单中应该算是使用频率比较高的一个元素，而我们也知道页面上默认的select标签样式是很难看的。基本所有的团队都会选择使用Bootstrap或者自己封装一个下拉列表的组件，今天我们也试着使用CSS3新特性来写一个带动画效果的下拉列表样式吧。
CSS3
感兴趣的可以自行去github上学习源码，github地址如下。
https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html
首先，我们来看看带动画效果的下拉列表效果是什么样的，如下图所示。
效果图
这里我们简单分析下页面的构成，实际上非常的简单，主要包含以下三个元素。
表示外层容器的div元素
上面是一个span元素
下面是一个ul元素，每个li表示一个列表项
在整个下拉列表中，主要有两个动画。
下拉菜单旁边的小三角图标，在鼠标悬浮和离开时动态变换
下方的列表，在鼠标悬浮和离开上面的span元素时，列表会有动画显示和消失的效果。
下面我们来看看整个页面的代码构成。
HTML
首先是页面的HTML代码，正如上一部分所讲，页面主要为一个外层容器div，内部是一个span和ul元素，每个列表项li内包含一个a元素，所有HTML部分代码如下所示。
HTML代码
CSS
CSS部分的代码才是整个实现效果的核心，我们具体来分析。
首先是页面的全局基本配置样式。
全局配置
然后是外层容器的样式。
外层容器样式
然后是span元素的样式，旁边的上三角形通过伪元素::after来实现，在::after伪元素中通过border-color属性来控制三角形的朝向，然后通过transition属性设置变换样式。
span元素以及上三角形
当鼠标停留在span元素上时，span元素背景色会改变，上三角会变成下三角。
鼠标停留后span的样式
紧接着是下面的ul以及li元素的样式，都是一些很普通的属性。
ul与li样式
然后是li下的a元素的样式。
li下a元素样式
然后是css中最核心的地方，ul的动画效果，通过translate3d属性改变ul所处的位置，再以transform属性添加动画效果。
ul初始状态
至此，所有代码讲解完毕，如果运行成功后，会得到文章开始时的下拉列表效果。
本篇文章主要给大家介绍了如何使用CSS编写一个带动画的下拉列表效果，你学会了吗？
文代码的动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>44-jQuery 下拉菜单</title>
<style type="text/css">
*{ /* 通配选择器*/
margin: 0; /*外边距：0*/
padding: 0; /*内边距：0*/
}
.daohang{ /* 导航样式*/
width: 80%; /*宽：80%*/
height: 40px; /* 高：40像素*/
border: #000000 solid 1px; /*边框：黑色 实线 1像素*/
background-color: chartreuse; /*背景颜色*/
border-radius: 10px; /*圆角：10像素*/
margin: 10px auto; /*外边距：上10像素 左右居中*/
}
.daohang>li{ /* 导航里面的li标签样式*/
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{ /* 二级菜单里的里标签样式*/
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标签的鼠标停留*/
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>')
// 导航ul里面的li标签的移入移出事件
$(".daohang>li").hover(function(){
$(this).append($sub) // 为现在这个li标签添加二级菜单
$(".sub").stop() // 停止二级菜单的动画
$(".sub").slideDown(1000) // 用一秒的时间展开二级菜单
}, function(){ // 移出事件
$(".sub").stop() // 停止二级菜单的动画
$(".sub").slideUp(100) // 用100毫秒的时间收起二级菜单
})
})
</script>
</head>
<body>
<ul class="daohang"> <!-- 导航ul -->
<li>第一个 <!-- li标签 -->
<!-- <ul class="sub1">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul> -->
</li>
<li>第二个</li> <!-- li标签 -->
<li>第三个</li> <!-- li标签 -->
<li>第四个</li> <!-- li标签 -->
<li>第五个</li> <!-- li标签 -->
</ul>
</body>
</html>
ss实现常用下划线导航动画下拉菜单效果，看效果
鼠标经过后，下划线由中间像两边扩散，下拉框由下往上出现！
代码：
css:
*请认真填写需求信息，我们会在24小时内与您取得联系。
