閱讀(2.6k) 書簽贊(0) 我要糾錯

W3.CSS Navigation Bars (導(dǎo)航欄)

2020-12-01 11:43 更新

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	可點(diǎn)擊的下拉元素（而不是懸停）

基本導(dǎo)航

w3-bar 類可以水平地顯示 HTML 元素的容器。

w3-bar-item 類定義了容器的元件。

它是創(chuàng)建導(dǎo)航欄的理想工具：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

響應(yīng)式導(dǎo)航

w3-mobile 類使得響應(yīng)（水平在大屏幕上和垂直上小）的任何桿元件。

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

彩色導(dǎo)航欄

使用 w3-color 類向?qū)Ш綑谔砑宇伾?/p>

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

帶邊框的導(dǎo)航欄

使用 w3-border 或 w3-card 類在導(dǎo)航欄周圍添加邊框，或?qū)⑵滹@示為卡：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

活動/當(dāng)前鏈接

將 w3-color 類添加到鏈接中以突出顯示它：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

懸停鏈接

當(dāng)您將鼠標(biāo)懸停在按鈕上時，背景顏色將變?yōu)榛疑?/p>

如果要在懸停時使用不同的背景色，請使用任何 w3-hover-color 類：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

如果要更改文本顏色，請使用 w3-hover-none 類關(guān)閉默認(rèn)的懸停效果，然后添加 w3-hover-text 類。

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

花一些時間來體驗(yàn)不同的懸停效果：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

右對齊鏈接

在列表項(xiàng)上使用 w3-right 類可將特定鏈接右對齊：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

導(dǎo)航欄大小

使用 w3-size 類更改導(dǎo)航欄內(nèi)鏈接的字體大?。?/p>

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

使用 w3-padding 類可更改導(dǎo)航欄中每個鏈接的填充：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

注意：

您也可以向?qū)Ш綑谔砑犹畛洌皇敲總€按鈕添加。但是，如果這樣做，請注意，鏈接不會在懸停時獲得完全填充：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

使用 CSS width 屬性自定義鏈接的寬度

（注意：在小屏幕上，使用 w3-mobile 將鏈接轉(zhuǎn)換為 100％的寬度）：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

帶有圖標(biāo)的導(dǎo)航欄

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

上面的示例中的“ fa fa”類顯示“ Font Awesome”圖標(biāo)。
在W3.CSS圖標(biāo)一章中了解有關(guān)如何顯示圖標(biāo)的更多信息。

導(dǎo)航欄文字

如果要用文本代替導(dǎo)航欄中的按鈕，請使用 w3-bar-item 類獲得與按鈕相同的填充。

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

導(dǎo)航欄帶有輸入和按鈕

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

帶有下拉菜單的導(dǎo)航欄

將鼠標(biāo)移到“下拉”鏈接上：

實(shí)例

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

可點(diǎn)擊的下拉菜單

如果您希望單擊下拉鏈接而不是懸停，請使用 w3-dropdown-click：

實(shí)例

下拉 <i class="fa fa-caret-down"></i>

</button>

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

水平下拉菜單

如果希望下拉鏈接水平顯示而不是垂直顯示，請從下拉容器中刪除 w3-bar-block 類：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

響應(yīng)式下拉導(dǎo)航欄

在所有鏈接（包括下拉容器）上使用 w3-mobile 類，以創(chuàng)建帶有響應(yīng)下拉鏈接的響應(yīng)導(dǎo)航欄。

調(diào)整瀏覽器窗口的大小以查看效果：

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

固定導(dǎo)航欄

要強(qiáng)制導(dǎo)航欄保持在頁面頂部或底部，即使用戶滾動頁面，也應(yīng)在導(dǎo)航欄周圍包裹一個 <div> 元素，并添加 w3-top 或 w3-bottom 類：

固定頂:

實(shí)例

...

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

固定底:

實(shí)例

...

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

垂直導(dǎo)航欄

w3-bar-block 類是用于垂直顯示 HTML 元素的容器。

實(shí)例

</div>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

折疊導(dǎo)航欄

當(dāng)導(dǎo)航欄在小屏幕上占用過多空間，并且您不想默認(rèn)垂直顯示時，可以在導(dǎo)航欄中的特定鏈接上使用隱藏和顯示類。

在以下示例中，當(dāng)在平板電腦和移動設(shè)備上顯示時，導(dǎo)航欄將替換為右上角的按鈕（?）。單擊該按鈕時，導(dǎo)航欄中的鏈接將垂直堆疊：

實(shí)例

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>

嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

以上內(nèi)容是否對您有幫助：

← W3.CSS Accordions (折疊欄)

W3.CSS Sidebar (側(cè)欄) →

寫筆記

我要補(bǔ)充

W3.CSS Navigation Bars (導(dǎo)航欄)

W3.CSS導(dǎo)航欄類

基本導(dǎo)航

實(shí)例

響應(yīng)式導(dǎo)航

實(shí)例

彩色導(dǎo)航欄

實(shí)例

帶邊框的導(dǎo)航欄

實(shí)例

活動/當(dāng)前鏈接

實(shí)例

懸停鏈接

實(shí)例

實(shí)例

實(shí)例

右對齊鏈接

實(shí)例

導(dǎo)航欄大小

實(shí)例

實(shí)例

實(shí)例

實(shí)例

帶有圖標(biāo)的導(dǎo)航欄

實(shí)例

上面的示例中的“ fa fa”類顯示“ Font Awesome”圖標(biāo)。在W3.CSS圖標(biāo)一章中了解有關(guān)如何顯示圖標(biāo)的更多信息。

導(dǎo)航欄文字

實(shí)例

導(dǎo)航欄帶有輸入和按鈕

實(shí)例

帶有下拉菜單的導(dǎo)航欄

實(shí)例

可點(diǎn)擊的下拉菜單

實(shí)例

水平下拉菜單

實(shí)例

響應(yīng)式下拉導(dǎo)航欄

實(shí)例

固定導(dǎo)航欄

實(shí)例

實(shí)例

垂直導(dǎo)航欄

實(shí)例

折疊導(dǎo)航欄

實(shí)例

推薦文章

推薦教程

推薦課程

上面的示例中的“ fa fa”類顯示“ Font Awesome”圖標(biāo)。
在W3.CSS圖標(biāo)一章中了解有關(guān)如何顯示圖標(biāo)的更多信息。