在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少。
实现逻辑:
核心:hover伪类控制子元素的显示隐藏,添加css3动画; (没错就是这样简单)
:hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p。当用户鼠标离开元素时,恢复元素原有的样式显示
实现代码:
<style type="text/css">
*{margin: 0; padding: 0;}
ul{ list-style: none; }
a{text-decoration: none;}
.nav{ height: 50px;
font-size: 14px;
background-color:#0081C2;
}
.nav ul{ width: 90%; margin: 0 auto;}
.nav ul li{
display: inline-block;
width: 15%; height:50px;
text-align: center; line-height: 45px;
position: relative;
}
/*menu相对li定位 并默认隐藏*/
.menu{ position: absolute;
left: 0; top:50px;
width: 100%; background-color: #005580;
line-height: 33px;
display: none;
}
.menu p{ width: 100%; height: 35px;}
.menu p a:hover{ color: #dfdfdf;}
.nav ul li a{display: block;
width: 100%; height: 100%;
color: #ffffff; text-align: center;
}
/*当li鼠标hover时显示*/
.nav ul li:hover{ background-color: #00007D;}
.nav ul li:hover .menu{ display: block;}
</style>
<div class="nav">
<ul>
<li>
<a href="#">菜单选项一</a>
<div class="menu">
<p><a href="#">二级菜单1</a></p>
<p><a href="#">二级菜单2</a></p>
<p><a href="#">二级菜单3</a></p>
<p><a href="#">二级菜单4</a></p>
</div>
</li>
<li>
<a href="#">菜单选项二</a>
<div class="menu">
<p><a href="#">二级菜单1</a></p>
<p><a href="#">二级菜单2</a></p>
<p><a href="#">二级菜单3</a></p>
<p><a href="#">二级菜单4</a></p>
</div>
</li>
<li><a href="#">菜单选项三</a></li>
<li><a href="#">菜单选项四</a></li>
<li><a href="#">菜单选项五</a></li>
<li><a href="#">菜单选项六</a></li>
</ul>
</div>