核心提示：下拉导航分别通过纯css和纯js实现教程案例图片展示Tips:纯css实现的兼容性比较好，纯js的代码兼容性不太友好，需要引用的朋友要自行优化。（一）纯css代码1.html代码!DOCTYPE ht...
下拉导航分别通过纯css和纯js实现教程
案例图片展示
Tips:纯css实现的兼容性比较好，纯js的代码兼容性不太友好，需要引用的朋友要自行优化。
（一）纯css代码
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/downlist.css">
</head>
<body>
<p class="downList li-f">
<ul>
<li>
<span>主页</span>
</li>
<li>
<span>菜单一</span>
<ul>
<li ><span>子菜单A</span></li>
<li ><span>子菜单B</span></li>
<li ><span>子菜单C</span></li>
<li ><span>子菜单D</span></li>
<li ><span>子菜单E</span></li>
<li><span>子菜单F</span></li>
<li><span>子菜单G</span></li>
<li><span>子菜单H</span></li>
</ul>
</li>
<li>
<span>菜单二</span>
<ul>
<li><span>子菜单A</span></li>
<li><span>子菜单B</span></li>
<li><span>子菜单C</span></li>
<li><span>子菜单D</span></li>
<li><span>子菜单E</span></li>
<li><span>子菜单F</span></li>
<li><span>子菜单G</span></li>
<li><span>子菜单H</span></li>
</ul>
</li>
<li>
<span>菜单三</span>
<ul>
<li><span>子菜单A</span></li>
<li><span>子菜单B</span></li>
<li><span>子菜单C</span></li>
<li><span>子菜单D</span></li>
<li><span>子菜单E</span></li>
<li><span>子菜单F</span></li>
<li><span>子菜单G</span></li>
<li><span>子菜单H</span></li>
</ul>
</li>
<li>
<span>菜单四</span>
</li>
<li>
<span>返回教程</span>
</li>
</ul>
</p>
</body>
</html>
2.css代码
.downList{
width: 610px;
margin: 100px auto;
}
.downList li{
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
background-color: #292929;
color: #999395;
transition: .8s;
}
.downList li:hover{
color: red;
border-left: 2px solid red;
background-color: black;
}
.downList li ul li{
border:1px solid black;
opacity: 0;
transform: rotateY(180deg);
}
.downList li ul li:hover{
color: white;
border-left: black;
}
.downList li:hover ul li{
opacity: 1;
transform: rotateY(0deg);
}
.downList li:hover ul li:nth-child(1){
transition-delay: 100ms;
}
.downList li:hover ul li:nth-child(2){
transition-delay: 200ms;
}
.downList li:hover ul li:nth-child(3){
transition-delay: 300ms;
}
.downList li:hover ul li:nth-child(4){
transition-delay: 400ms;
}
.downList li:hover ul li:nth-child(5){
transition-delay: 500ms;
}
.downList li:hover ul li:nth-child(6){
transition-delay: 600ms;
}
.downList li:hover ul li:nth-child(7){
transition-delay: 700ms;
}
.downList li:hover ul li:nth-child(8){
transition-delay: 800ms;
}
/*@keyframes myList {*/
/*0%{ opacity: 0; transform: rotateY(90deg) rotateX(20deg);}*/
/*100%{ opacity: 1;transform: rotateY(0deg) rotateX(0deg);}*/
/*}*/
.downList li ul li:nth-child(8){
transition-delay: 100ms;
}
.downList li ul li:nth-child(7){
transition-delay: 200ms;
}
.downList li ul li:nth-child(6){
transition-delay: 300ms;
}
.downList li ul li:nth-child(5){
transition-delay: 400ms;
}
.downList li ul li:nth-child(4){
transition-delay: 500ms;
}
.downList li ul li:nth-child(3){
transition-delay: 600ms;
}
.downList li ul li:nth-child(2){
transition-delay: 700ms;
}
.downList li ul li:nth-child(1){
transition-delay: 800ms;
}
（二）纯js实现
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/downlist1.css">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p class="downList" id="downList">
<ul>
<li>
<span>主页</span>
</li>
<li>
<span>菜单一</span>
<ul>
<li><span>子菜单A</span></li>
<li><span>子菜单B</span></li>
<li><span>子菜单C</span></li>
<li><span>子菜单D</span></li>
<li><span>子菜单E</span></li>
<li><span>子菜单F</span></li>
<li><span>子菜单G</span></li>
<li><span>子菜单H</span></li>
</ul>
</li>
<li>
<span>菜单二</span>
<ul>
<li><span>子菜单A</span></li>
<li><span>子菜单B</span></li>
<li><span>子菜单C</span></li>
<li><span>子菜单D</span></li>
<li><span>子菜单E</span></li>
<li><span>子菜单F</span></li>
<li><span>子菜单G</span></li>
<li><span>子菜单H</span></li>
</ul>
</li>
<li>
<span>菜单三</span>
<ul>
<li><span>子菜单A</span></li>
<li><span>子菜单B</span></li>
<li><span>子菜单C</span></li>
<li><span>子菜单D</span></li>
<li><span>子菜单E</span></li>
<li><span>子菜单F</span></li>
<li><span>子菜单G</span></li>
<li><span>子菜单H</span></li>
</ul>
</li>
<li>
<span>菜单四</span>
</li>
<li>
<span>返回教程</span>
</li>
</ul>
</p>
<script>
var dBCn = document.getElementById('downList');
var lBtn = dBCn.getElementsByTagName('li');
for(var i=0;i<lBtn.length;i++){
lBtn[i].index=i;
lBtn[i].onmousemove=move;
lBtn[i].onmouseout=out;
}
function move(){
for(var i=0;i<lBtn.length;i++){
lBtn[i].className="";
}
this.className="li-hover";
var lis=this.getElementsByTagName('li');
for(i=0;i<lis.length;i++){
lis[i].className="move";
lis[i].style.animationDelay=i*100+"ms";
}
}
function out(){
for(var i=0;i<lBtn.length;i++){
lBtn[i].className="";
}
this.className="li-hover";
var lis=this.getElementsByTagName('li');
for(i=0;i<lis.length;i++){
lis[i].className="out";
lis[i].style.animationDelay=(lis.length-i)*100+"ms";
}
}
</script>
</body>
</html>
css样式
.downList{
width: 610px;
margin: 100px auto;
}
.downList li{
width: 100px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
background-color: #292929;
color: #999395;
transition: .8s;
}
.li-hover{
color: red!important;
border-left: 2px solid red;
background-color: black!important;
}
.downList li ul li{
border:1px solid black;
transition-duration: 3s;
opacity: 0;
}
.out{
animation: myListA .8s both;
}
.move{
opacity: 1;
animation: myList .8s both;
}
.move-hover{
color: white;
border-left: black;
}
@keyframes myListA {
0%{opacity: 1;transform: rotateY(0deg) ;}
100%{opacity: 0; transform: rotateY(90deg) ;}
}
@keyframes myList {
0%{opacity: 0; transform: rotateY(90deg);}
100%{opacity: 1; transform: rotateY(0deg);}
}
