纯CSS实现二级导航菜单(具有伸缩过渡效果)
作者:admin 时间:2022-3-14 11:27:43 浏览:本文将要介绍的是一款具有伸缩过渡效果的二级导航菜单，该菜单使用纯CSS实现，代码较少，修改容易，如果你喜欢此菜单的效果，那么可以直接下载本实例修改使用，方便快捷。
HTML
<div class="nav">
<ul class="first">
<li>一级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>二级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>三级菜单
<ul class="second">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</div>
<div class="content"></div>
HTML使用一个DIV标签作为菜单盒子模型，其class值是nav。
菜单列表（一级和二级）均使用ul li标签，一级菜单ul的class值是first，二级菜单ul的class值是second。
CSS
.nav {
width: 600px;
height: 50px;
margin: 100px auto;
background-color: yellow;
}
.content {
width: 600px;
height: 250px;
margin: -100px auto;
background-color: red;
}
.nav .first>li {
width: 200px;
height: 50px;
list-style: none;
line-height: 50px;
float: left;
text-align: center;
}
.second li {
list-style: none;
background-color: pink;
transform: rotateY(-90deg);
transition-duration: 1s;
opacity: 0;
position: relative;
}
.first>li:hover .second li {
transform: none;
opacity: 1;
}
.second li:nth-child(1) {
transition-delay: 0ms;
}
.second li:nth-child(2) {
transition-delay: 100ms;
}
.second li:nth-child(3) {
transition-delay: 200ms;
}
.second li:nth-child(4) {
transition-delay: 300ms;
}
.second li:nth-child(5) {
transition-delay: 400ms;
}CSS代码不多，并且也不难理解，.nav{}定义菜单的高、宽、背景颜色等属性。
.nav .first>li{}定义一级菜单的高、宽、列表样式、行高等属性。
.second li{}定义二级菜单的列表样式、背景颜色等属性，这里定义了transform: rotateY(-90deg);的过渡动画属性，沿Y轴转动90度，transition-duration: 1s;是定义动画时间为1s。
nth-child(n) n的值是1-5，代表是5个二级菜单项。如果你有多于5个二级菜单项，则参考实例代码增加相应的nth-child(n)属性，需要注意的是transition-delay是以100ms递增的。
总结
本文介绍了纯CSS实现二级导航菜单(具有伸缩过渡效果)，代码精炼易理解易修改，如果喜欢该菜单，可以直接下载实例代码修改使用。
您可能对以下文章也感兴趣
相关文章
x
- 站长推荐
