浅谈纯CSS实现二级导航(优缺点与局限性)
【前言】
本文简单说下如何用CSS实现二级导航,CSS实现的缺点很明显:二级导航无法实现过渡效果,高度变化由0变auto的过程和display由none变block一样,无法实现过渡。
注意(局限性):高度变化若想出现过渡效果,必须由0变到指定高度,如0-200px等才可以。
【主体
(1)height由0变为auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; } .nav{ width: 80%; height: 40px; line-height: 40px; margin: auto; } .nav>li{ float: left; min-width: 150px; position: relative; padding-bottom: 10px; } .nav>li>a{ display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.3); text-align: center; color: white; } .nav>li>ul{ position: absolute; top: 50px; background: rgba(0,0,0,0.2); min-width: 150%; left: -25%; height: 0px; overflow: hidden; transition: all 0.6s; } .nav>li>ul>li>a{ text-align: center; display: block; width: 100%; height: 100%; color: white; } .nav>li>a:hover{ background: rgba(0,0,0,0.4); } .nav>li:hover ul{ /*display: block;*/ height: auto; } .nav>li>ul>li>a:hover{ background: rgba(0,0,0,0.4); } </style> </head> <body> <!-- CSS实现的缺点很明显:二级导航无法实现过渡效果,高度变化由0变auto的过程和display由none变block一样,无法实现过渡。 注意:高度变化若想出现过渡效果,需要由0变到指定高度,如0-200px等才可以。 --> <ul class="nav"> <li> <a href="#">首页</a> </li> <li> <a href="#">简介</a> <ul> <li><a href="#">创建时间</a></li> <li><a href="#">上市时间</a></li> <li><a href="#">风投时间</a></li> </ul> </li> <li> <a href="#">应聘</a> <ul> <li><a href="#">技术岗</a></li> <li><a href="#">管理岗</a></li> <li><a href="#">人资岗</a></li> </ul> </li> <li> <a href="#">产品</a> <ul> <li><a href="#">产品名称</a></li> <li><a href="#">产品来源</a></li> <li><a href="#">产品功效</a></li> <li><a href="#">市场效益</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </body> </html>
(2)height由0变为200px----有过渡效果
将height的auto改为200px即可
(3)display由none改为block
.nav>li>ul{ display: none; } .nav>li:hover ul{ display: block; }
.