如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动态显示与隐藏。
1 结构
一般导航的主体我们主要是使用ul li标签
| <body> <header> <!-- 一级导航开始 --> <nav> <ul class="menu"> <li> <a href="#">首页</a> </li> <li> <a href="#">产品</a> <!-- 二级导航开始 --> <ul class="submenu"> <li><a href="#">小程序</a></li> <li><a href="#">微信</a></li> <li><a href="#">企业站</a></li> </ul> <!-- 二级导航结束 --> </li> <li> <a href="#">服务</a> <!-- 二级导航开始 --> <ul class="submenu"> <li><a href="#">技术支持</a></li> <li><a href="#">产品外包</a></li> </ul> <!-- 二级导航结束 --> </li> <li><a href="#">关于我们</a></li> <li><a href="#">人才招聘</a></li> </ul> </nav> <!-- 一级导航结束 --> </header></body> |
2 布局
导航的布局，由于子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么就需要让li进行浮动。
| body{margin: 0; font-size: 14px; color: #666} ul,ol{margin: 0;padding: 0; list-style: none;} a {text-decoration: none; color: #666;} /*一级导航*/ /*背景色*/ ul.menu,ul.submenu { background-color: #ededed; } /*一级导航浮动*/ ul.menu::after { content: ''; display: block; clear: both; } ul.menu > li { float: left; width: 120px; line-height: 3em; height: 3em; text-align: center; cursor:pointer; } /*二级导航项分割线*/ ul.submenu { /*默认隐藏*/ display: none; } ul.submenu > li { border-bottom: 1px solid #fff; } /*内容区*/ .content { min-height: 800px; background-color: #fff; } |
