CSS 導航欄
一、導航欄
熟練使用導航欄，對於任何網站都非常重要。
使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。
二、導航欄=鏈接列表
作為標准的HTML基礎一個導航欄是必須的。
在我們的例子中我們將建立一個標准的HTML列表導航欄。
導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素非常有意義：
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯系</a></li>
<li><a href="#about">關於</a></li>
</ul>
注意：這里我們用 href="#"作為測試連接。但在一個真正的 web 站點上需要真實的 url。
現在，讓我們從列表中刪除邊距和填充：
ul { list-style-type: none; margin: 0; padding: 0; }
例子解析：
- list-style-type:none - 移除列表前小標志。一個導航欄並不需要列表標記
- 移除瀏覽器的默認設置將邊距和填充設置為0
上面的例子中的代碼是垂直和水平導航欄使用的標准代碼。
三、垂直導航欄
上面的代碼，我們只需要 <a>元素的樣式，建立一個垂直的導航欄：
a { display:block; width:60px; }
示例說明：
- display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
- width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
注意： 請務必指定 <a>元素在垂直導航欄的的寬度。如果省略寬度，IE6可能產生意想不到的效果。
四、垂直導航條實例
創建一個簡單的垂直導航條實例，在鼠標移動到選項時，修改背景顏色：
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /* 鼠標移動到選項上修改背景顏色 */ li a:hover { background-color: #555; color: white; }
五、激活/當前導航條實例
在點擊了選項后，我們可以添加 "active" 類來標准哪個選項被選中：
.active { background-color: #4CAF50; color: white; }
六、創建鏈接並添加邊框
可以在 <li> or <a> 上添加text-align:center 樣式來讓鏈接居中。
可以在 border <ul> 上添加 border 屬性來讓導航欄有邊框。如果要在每個選項上添加邊框，可以在每個 <li> 元素上添加border-bottom :
ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }
七、全屏高度的固定導航條
接下來我們創建一個左邊是全屏高度的固定導航條，右邊是可滾動的內容。
ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /* 全屏高度 */ position: fixed; overflow: auto; /* 如果導航欄選項多，允許滾動 */ }
注意: 該實例可以在移動設備上使用。
八、水平導航欄
有兩種方法創建橫向導航欄。使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。
1，內聯列表項
建立一個橫向導航欄的方法之一是指定元素， 上述代碼是標准的內聯:
li { display:inline; }
實例解析：
- display:inline; -默認情況下，<li>元素是塊元素。在這里，我們刪除換行符之前和之后每個列表項，以顯示一行。
2，浮動列表項
在上面的例子中鏈接有不同的寬度。
對於所有的鏈接寬度相等，浮動 <li>元素，並指定為 <a>元素的寬度：
li { float:left; } a { display:block; width:60px; }
實例解析：
- float:left - 使用浮動塊元素的幻燈片彼此相鄰
- display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
- width:60px - 塊元素默認情況下是最大寬度。我們要指定一個60像素的寬度
九、水平導航條實例
創建一個水平導航條，在鼠標移動到選項后修改背景顏色。
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /*鼠標移動到選項上修改背景顏色 */ li a:hover { background-color: #111; }
1，鏈接右對齊
在點擊了選項后，我們可以添加 "active" 類來標准哪個選項被選中：
.active { background-color: #4CAF50; }
2，鏈接右對齊
將導航條最右邊的選項設置右對齊 (float:right;)：
<ul>
<li><a href="#home">主頁</a></li>
<li><a href="#news">新聞</a></li>
<li><a href="#contact">聯系</a></li>
<li style="float:right"><a class="active" href="#about">關於</a></li>
</ul>
3，添加分割線
<li> 通過 border-right 樣式來添加分割線:
/* 除了最后一個選項(last-child) 其他的都添加分割線 */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }
4，固定導航條
可以設置頁面的導航條固定在頭部或者底部：
（1）固定在頭部
ul { position: fixed; top: 0; width: 100%; }
（2）固定在底部
ul { position: fixed; bottom: 0; width: 100%; }
注意: 該實例可以在移動設備上使用
十、灰色水平導航條
/*固定在底部*/ ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }
十一、示例
（1）示例1：
響應式頂部導航：如何使用 CSS3 媒體查詢來創建一個響應式導航。
html代碼：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul class="sidenav"> <li><a class="active" href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯系</a></li> <li><a href="#about">關於</a></li> </ul> <div class="content"> <h2>響應式邊欄導航實例</h2> <p>該實例在屏幕寬度小於 900px 時導航欄為頂部水平導航欄，如果大於 900px 導航欄會在左邊，且是固定的。</p> <p>如果屏幕寬度小於 400px 會變為垂直導航欄。</p> <h3>重置瀏覽器窗口大小，查看效果。</h3> </div> </body> </html>
css代碼：
body {margin: 0;} ul.sidenav { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } ul.sidenav li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } ul.sidenav li a.active { background-color: #4CAF50; color: white; } ul.sidenav li a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 25%; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 900px) { ul.sidenav { width: 100%; height: auto; position: relative; } ul.sidenav li a { float: left; padding: 15px; } div.content {margin-left: 0;} } @media screen and (max-width: 400px) { ul.sidenav li a { text-align: center; float: none; } }
效果：
（2）示例2：
響應式邊欄導航：如何使用 CSS3 媒體查詢來創建一個邊欄導航。
html代碼：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul class="topnav"> <li><a class="active" href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <li><a href="#contact">聯系</a></li> <li class="right"><a href="#about">關於</a></li> </ul> <div style="padding:0 16px;"> <h2>響應式導航欄實例</h2> <p>在屏幕寬度小於 600px 會重置導航欄。</p> <h4>重置瀏覽器窗口大小，查看效果。</h4> </div> </body> </html>
css代碼：
body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} @media screen and (max-width: 600px){ ul.topnav li.right, ul.topnav li {float: none;} }
效果：
（3）示例3：
導航下拉菜單：在導航條內部設置下拉菜單
html代碼：
<!DOCTYPE html> <html> <head> <title>下拉菜單實例|菜鳥教程(runoob.com)</title> <meta charset="utf-8"> <style> ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; } li{ float:left; } li a, .dropbtn { display:inline-block; color:white; text-align:center; padding:14px 16px; text-decoration:none; } li a:hover, .dropdown:hover, .dropbtn { background-color:#111; } .dropdown { display:inline-block; } .dropdown-content { display:none; position:absolute; background-color:#f9f9f9; min-width:160px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color:black; padding:12px 16px; text-decoration:none; display:block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display:block; } </style> </head> <body> <ul> <li><a class="active" href="#home">主頁</a></li> <li><a href="#news">新聞</a></li> <div class="dropdown"> <a href="#" class="dropbtn">下拉菜單</a> <div class="dropdown-content"> <a href="#">鏈接 1</a> <a href="#">鏈接 2</a> <a href="#">鏈接 3</a> </div> </div> </ul> <h3>導航欄上的下拉菜單</h3> <p>鼠標移動到 "下拉菜單" 鏈接先顯示下拉菜單。</p> </body> </html>
效果：
