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

基本導(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ū)Ш綑谔砑犹畛洌皇敲總€按鈕添加。但是,如果這樣做,請注意,鏈接不會在懸停時獲得完全填充:

實例

<div class="w3-bar w3-green w3-padding-16"></div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

使用 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)航欄帶有輸入和按鈕

實例

<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">查找</a>
</div>

嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

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

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

實例

<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>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

響應(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 類:

固定頂:

實例

<div class="w3-top">

  <div class="w3-bar">

    ...

    ...

  </div>

</div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

固定底:

實例

<div class="w3-bottom">

  <div class="w3-bar">

    ...

    ...

  </div>

</div>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例

垂直導(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>


嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號