W3.CSS Navigation Bars (導(dǎo)航欄)
W3.CSS導(dǎo)航欄類
W3.CSS為導(dǎo)航欄提供以下類：
| 類 | 定義 |
|---|---|
| w3-bar
|
HTML 元素的水平容器 |
| w3-bar-block | HTML 元素的垂直容器 |
| w3-bar-item | 容器欄元素 |
| w3-sidebar
|
HTML 元素的垂直邊欄 |
| w3-mobile
|
使任何條形元素移動優(yōu)先 |
| w3-dropdown-hover
|
懸停的下拉元素 |
| w3-dropdown-click
|
可點擊的下拉元素（而不是懸停） |
基本導(dǎo)航
w3-bar 類可以水平地顯示 HTML 元素的容器。
w3-bar-item 類定義了容器的元件。
它是創(chuàng)建導(dǎo)航欄的理想工具：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
響應(yīng)式導(dǎo)航
w3-mobile 類使得響應(yīng)（水平在大屏幕上和垂直上?。┑娜魏螚U元件。
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
彩色導(dǎo)航欄
使用 w3-color 類向?qū)Ш綑谔砑宇伾?/p>
實例
<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶邊框的導(dǎo)航欄
使用 w3-border 或 w3-card 類在導(dǎo)航欄周圍添加邊框，或?qū)⑵滹@示為卡：
實例
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-bar w3-border w3-card-4">
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
活動/當(dāng)前鏈接
將 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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
懸停鏈接
當(dāng)您將鼠標(biāo)懸停在按鈕上時，背景顏色將變?yōu)榛疑?/p>
如果要在懸停時使用不同的背景色，請使用任何 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 類關(guān)閉默認(rèn)的懸停效果 ，然后添加 w3-hover-text 類。
實例
<div class="w3-bar w3-border w3-black">
<a href="#" class="w3-bar-item w3-button">默認(rèn)</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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
導(dǎo)航欄大小
使用 w3-size 類更改導(dǎo)航欄內(nèi)鏈接的字體大?。?/p>
實例
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
使用 w3-padding 類可更改導(dǎo)航欄中每個鏈接的填充：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
您也可以向?qū)Ш綑谔砑犹畛洌皇敲總€按鈕添加。但是，如果這樣做，請注意，鏈接不會在懸停時獲得完全填充：
使用 CSS width 屬性自定義鏈接的寬度
（注意：在小屏幕上，使用 w3-mobile 將鏈接轉(zhuǎn)換為 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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶有圖標(biāo)的導(dǎo)航欄
實例
<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”圖標(biāo)。
在W3.CSS圖標(biāo)一章中了解有關(guān)如何顯示圖標(biāo)的更多信息。
導(dǎo)航欄文字
如果要用文本代替導(dǎo)航欄中的按鈕，請使用 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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
導(dǎo)航欄帶有輸入和按鈕
實例
<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">查找</a>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶有下拉菜單的導(dǎo)航欄
將鼠標(biāo)移到“下拉”鏈接上：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
響應(yīng)式下拉導(dǎo)航欄
在所有鏈接（包括下拉容器）上使用 w3-mobile 類，以創(chuàng)建帶有響應(yīng)下拉鏈接的響應(yīng)導(dǎo)航欄。
調(diào)整瀏覽器窗口的大小以查看效果：
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
固定導(dǎo)航欄
要強制導(dǎo)航欄保持在頁面頂部或底部，即使用戶滾動頁面，也應(yīng)在導(dǎo)航欄周圍包裹一個 <div> 元素，并添加 w3-top 或 w3-bottom 類：
固定頂:
固定底:
垂直導(dǎo)航欄
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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
折疊導(dǎo)航欄
當(dāng)導(dǎo)航欄在小屏幕上占用過多空間，并且您不想默認(rèn)垂直顯示時，可以在導(dǎo)航欄中的特定鏈接上使用隱藏和顯示類。
在以下示例中，當(dāng)在平板電腦和移動設(shè)備上顯示時，導(dǎo)航欄將替換為右上角的按鈕（?）。單擊該按鈕時，導(dǎo)航欄中的鏈接將垂直堆疊：
實例
<script>
function myFunction() {
var x = document.getElementById("demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：