如果想要實現網頁的二級導航，我們可以使用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; } |
