W3.CSS 導航欄
垂直
水平
W3.CSS 導航欄類
W3.CSS 為導航欄提供了以下類
| 類 | 定義 |
|---|---|
| w3-bar | 水平容器，用於 HTML 元素 |
| w3-bar-block | 垂直容器，用於 HTML 元素 |
| w3-bar-item | 容器欄元素 |
| w3-sidebar | 垂直側邊欄，用於 HTML 元素 |
| w3-mobile | 使任何欄元素實現移動優先響應式 |
| w3-dropdown-hover | 可懸停的下拉選單元素 |
| w3-dropdown-click | 可點選的下拉選單元素（代替懸停） |
基本導航
w3-bar 類是用於水平顯示 HTML 元素的容器。
w3-bar-item 類定義了容器元素。
它是建立導航欄的完美工具
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
響應式導航
w3-mobile 類使所有欄元素都具有響應式（在大螢幕上水平顯示，在小螢幕上垂直顯示）。
中等和大螢幕
小螢幕
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">主頁</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 3</a>
</div>
彩色導航欄
使用 w3-color 類為導航欄新增顏色
示例
<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">
自己試試 »
帶邊框的導航欄
使用 w3-border 或 w3-card 類在導航欄周圍新增邊框，或將其顯示為卡片
活動/當前連結
向連結新增 w3-color 類以突出顯示它
示例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
懸停連結
當滑鼠懸停在按鈕上時，背景顏色將變為灰色。
如果您希望懸停時有不同的背景顏色，請使用任何 w3-hover-color 類
示例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">連結 3</a>
</div>
如果您想更改文字顏色，請使用 w3-hover-none 類關閉預設懸停效果，然後新增 w3-hover-text 類。
示例
<div class="w3-bar w3-border w3-black">
<a href="#" class="w3-bar-item w3-button">預設</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">連結 3</a>
</div>
花些時間嘗試不同的懸停效果
示例
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">連結 3</a>
</div>
右對齊連結
在列表項上使用 w3-right 類以右對齊特定連結
示例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">連結 3</a>
</div>
導航欄大小
使用 w3-size 類來更改導航欄內連結的字型大小
使用 w3-padding 類來更改導航欄內每個連結的內邊距
示例
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">主頁</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">連結 3</a>
</div>
注意：您也可以在導航欄上新增內邊距，而不是為每個按鈕新增。但是，如果這樣做，請注意連結在懸停時不會獲得完整的內邊距
使用 CSS width 屬性自定義連結的寬度
(注意：在小螢幕上使用 w3-mobile 將連結轉換為 100% 寬度)
示例
<div class="w3-bar w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">主頁</a>
<a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile" style="width:33%">連結 2</a>
</div>
自己試試 »
帶圖示的導航欄
示例
<div class="w3-bar w3-light-grey w3-border">
<a href="#" class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
自己試試 »
上面示例中的“fa fa”類顯示“Font Awesome”圖示。
在 W3.CSS 圖示章節瞭解有關如何顯示圖示的更多資訊。
導航欄文字
如果您想在導航欄內使用文字而不是按鈕，請使用 w3-bar-item 類以獲得與按鈕相同的內邊距。
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
<span class="w3-bar-item">文字</span>
</div>
自己試試 »
帶輸入框和按鈕的導航欄
示例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
自己試試 »
帶下拉選單的導航欄
將滑鼠移到“下拉選單”連結上
示例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">下拉選單</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
</div>
</div>
自己試試 »
可點選的下拉選單
如果您希望透過點選下拉菜單鏈接而不是懸停來開啟選單，請使用 w3-dropdown-click
示例
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
下拉選單 <i class="fa fa-caret-down"></i>
</button>
<div id="demo" class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
</div>
自己試試 »
水平下拉選單
如果希望下拉鍊接水平顯示而不是垂直顯示，請從下拉容器中移除 w3-bar-block 類
示例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">下拉選單</button>
<div class="w3-dropdown-content w3-card-4">
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
</div>
</div>
自己試試 »
帶響應式下拉選單的響應式導航欄
在所有連結（包括下拉容器）上使用 w3-mobile 類，以建立帶響應式下拉鍊接的響應式導航欄。
調整瀏覽器視窗大小以檢視效果
示例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile w3-green">主頁</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 2</a>
<div class="w3-dropdown-hover w3-mobile">
<button class="w3-button">下拉選單 <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">連結 3</a>
</div>
</div>
</div>
自己試試 »
固定導航欄
要強制導航欄保持在頁面頂部或底部，即使在使用者滾動頁面時也是如此，請將導航欄包裹在 <div> 元素中，並新增 w3-top 或 w3-bottom 類
垂直導航欄
w3-bar-block 類是用於垂直顯示 HTML 元素的容器。
示例
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">主頁</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
自己試試 »
摺疊導航欄
當導航欄在小螢幕上佔用過多空間，並且您不希望預設情況下將其顯示為垂直時，可以在導航欄中的特定連結上使用隱藏和顯示類。
在下面的示例中，當導航欄在平板電腦和移動裝置上顯示時，它被替換為右上角的按鈕 (☰)。單擊該按鈕後，導航欄中的連結將垂直堆疊
側邊導航
w3-sidebar 類建立側邊導航
轉到 下一章 瞭解有關側邊導航的更多資訊。
