菜单练习.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my菜单练习</title>
</head>
<style>
*{margin: 0;padding: 0;}
.first-menu{
margin: 50px;
width: 60px;
height: 60px;
position: relative;
}
.first-menu-btn{
display: block;
width: 60px;
height: 60px;
line-height: 60px;
background: #c8161e;
color: #fff;
text-align: center;
cursor: pointer;
}
.first-menu-ul{
list-style: none;
position: absolute;
}
.first-menu-ul li{
width: 200px;
height: 0;
transform: perspective(100px) rotateX(-90deg);
-webkit-transform: perspective(100px) rotateX(-90deg);
opacity: 0;
}
.first-menu-ul li a:last-child{
border-bottom:1px solid #9b161c;
}
.first-menu-ul li a{
display: block;
background: #c8161e;
color: #fff;
width: 100%;
height: 100%;
line-height: 50px;
cursor: pointer;
transition: all .3s ease;
-webkit-transition: all .3s ease;
border:1px solid #9b161c;
border-bottom:none;
}
.first-menu:hover li{
height: 50px;
transform: perspective(100px) rotateX(0deg);
-webkit-transform: perspective(100px) rotateX(0deg);
transform-origin: top center;
-webkit-transform-origin: top center;
opacity: 1;
}
.first-menu-ul li a:hover{
background: #fff;
color: #c8161e;
padding-left: 10px;
border-color: #fff;
}
//子菜单动迟延
.item5,.first-menu:hover .item1{
transition: all .4s ease;
-webkit-transition: all .4s ease;
}
.item4,.first-menu:hover .item2{
transition: all .4s ease .1s;
-webkit-transition: all .4s ease .1s;
}
.item3,.first-menu:hover .item3{
transition: all .4s ease .2s;
-webkit-transition: all .4s ease .2s;
}
.item2,.first-menu:hover .item4{
transition: all .4s ease .3s;
-webkit-transition: all .4s ease .3s;
}
.item1,.first-menu:hover .item5{
transition: all .4s ease .4s;
-webkit-transition: all .4s ease .5s;
}
</style>
<body>
<nav class="first-menu">
<a class="first-menu-btn">菜单</a>
<ul class="first-menu-ul">
<li class="item1"><a>子菜单</a></li>
<li class="item2"><a>子菜单</a></li>
<li class="item3"><a>子菜单</a></li>
<li class="item4"><a>子菜单</a></li>
<li class="item5"><a>子菜单</a></li>
</ul>
</nav>
</body>
</html>
