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>

嘗試一下 ?

現在，讓我們從列表中刪除邊距和填充：

例項

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" 類來標準哪個選項被選中：

  • 主頁
  • 新聞
  • 聯絡
  • 關於

例項

li a.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)的列表項。

這兩種方法都很好，但如果你想連結到具有相同的大小，你必須使用浮動的方法。

內聯列表項

建立一個橫向導航欄的方法之一是指定元素， 上述程式碼是標準的內聯:

例項

li { display:inline; }

嘗試一下 ?

例項解析：

  • display:inline; -預設情況下，<li>元素是塊元素。在這裡，我們刪除換行符之前和之後每個列表項，以顯示一行。

提示: 檢視 完整樣式的水平導航欄的示例。

浮動列表項

在上面的例子中連結有不同的寬度。

對於所有的連結寬度相等，浮動 <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; }

嘗試一下 ?

啟用/當前導航條例項

在點選了選項後，我們可以新增 "active" 類來標準哪個選項被選中：

例項

.active { background-color: #4CAF50; }

嘗試一下 ?

連結右對齊

將導航條最右邊的選項設定右對齊 (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>

嘗試一下 ?

新增分割線

<li> 通過 border-right 樣式來新增分割線:

例項

/* 除了最後一個選項(last-child) 其他的都新增分割線 */ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }

嘗試一下 ?

固定導航條

可以設定頁面的導航條固定在頭部或者底部：

固定在頭部

ul { position: fixed; top: 0; width: 100%; }

嘗試一下 ?

固定在底部

ul { position: fixed; bottom: 0; width: 100%; }

嘗試一下 ?

注意: 該例項可以在移動裝置上使用。

灰色水平導航條

固定在底部

ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }

嘗試一下 ?

更多例項

  • 響應式頂部導航：如何使用 CSS3 媒體查詢來建立一個響應式導航。

  • 響應式邊欄導航：如何使用 CSS3 媒體查詢來建立一個邊欄導航。

  • 導航下拉選單：在導航條內部設定下拉選單