純CSS編寫三級導航菜單-附源碼
- 2020 年 3 月 5 日
- 筆記
在我們日常瀏覽網站過程中，會發現每一個網站都會有導航欄，導航欄是做什麼的？在一個網站中具有怎麼樣的意義呢？我們先來了解一下這個問題。
作用
導航欄的作用是連接站點內或者軟件內各個主要應用頁面，方便使用者（瀏覽者）對網站內容查找進行快速的定位、尋找資源。
正文
導航欄中涉及到多級導航，本次我們演示的主要是三級導航欄，在深入的層級按照同樣的理論進行複製即可。下面一起來看一下吧！
實現效果
實現原理
一級導航的實現是非常簡單的，我們直接通過經典的ul、li模式去實現即可，這裏面不做太多的說明了。
二級導航主要是基於一級導航進行父子層級操作。對頂級的ul進行絕對定位操作。對子集進行相對定位操作。具體的實現方式可通過代碼查看，不做過多的文字描述。
對鏈接的動畫效果使用了一個鼠標指針浮動在元素上時，將背景色和文字顏色調換操作。也是比較簡單的效果。
代碼部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Css編寫多級導航欄菜單</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; float: left; } a{ color: #FFF; text-decoration: none; line-height: 40px; font-size: 14px; } nav{ width: 100%; height: 40px; background-color: #005ca9; } nav ul{ position:absolute; background-color: #005ca9; } nav ul li{ position: relative; } nav>ul>li{ margin: 0 15px; } nav>ul>li>a{ padding: 0 10px; display: block; height: 40px; } nav>ul>li:hover > a{ background-color: #FFF; color: #005ca9; } nav ul li:hover > ul{ display: block; } nav>ul>li>ul, nav>ul>li>ul>li>ul{ display: none; } nav>ul>li>ul>li, nav>ul>li>ul>li>ul>li{ width: 100%; } nav>ul>li>ul>li>a, nav>ul>li>ul>li>ul>li>a{ display: block; width: 100%; text-align: center; } nav>ul>li>ul>li>ul>li:hover >a, nav>ul>li>ul>li:hover >a{ background-color: #FFF; color: #005ca9; } nav>ul>li>ul>li>ul{ width: 100%; position: absolute; top: 0; left: 100%; } </style> </head> <body> <nav> <ul> <li><a href="#" title="首頁">首頁</a></li> <li><a href="#" title="關於我們">關於我們</a></li> <li> <a href="#" title="產品中心">產品中心</a> <ul> <li><a href="" title="機械類">機械類</a></li> <li><a href="" title="軍工類">軍工類</a></li> <li><a href="" title="化工類">化工類</a></li> <li><a href="" title="勘探類">勘探類</a></li> </ul> </li> <li> <a href="#" title="新聞資訊">新聞資訊</a> <ul> <li><a href="" title="行業新聞">行業新聞</a></li> <li><a href="" title="最新資訊">最新資訊</a></li> <li> <a href="" title="產品公告">產品公告</a> <ul> <li><a href="" title="近期公告">近期公告</a></li> <li><a href="" title="往期公告">往期公告</a></li> </ul> </li> <li><a href="" title="公司新聞">公司新聞</a></li> </ul> </li> <li><a href="#" title="經典案例">經典案例</a></li> <li><a href="#" title="意見反饋">意見反饋</a></li> <li><a href="#" title="聯繫我們">聯繫我們</a></li> </ul> </nav> </body> </html>
知識補充
本次主要使用到了一下知識點：
1、CSS 子元素選擇器
子選擇器使用了大於號（子結合符）。子結合符兩邊可以有空白符，這是可選的。
2、CSS 定位機制
relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute：元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
3、CSS錨偽類
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
提示：
- 在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
- 在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
- 偽類名稱對大小寫不敏感。
