W3.CSS Navigation Bars (导航栏)

2020-12-01 11:43 更新

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 类在导航栏周围添加边框,或将其显示为卡:

实例

<div class="w3-bar w3-border w3-light-grey">

<div class="w3-bar w3-border w3-card-4">


尝试一下 »
点击“尝试一下”按钮查看在线实例

活动/当前链接

将 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 类更改导航栏内链接的字体大小:

实例

<div class="w3-bar w3-green w3-large">

<div class="w3-bar w3-green w3-xlarge">


尝试一下 »
点击“尝试一下”按钮查看在线实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例
注意:

您也可以向导航栏添加填充,而不是每个按钮添加。但是,如果这样做,请注意,链接不会在悬停时获得完全填充:

实例

<div class="w3-bar w3-green w3-padding-16"></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">查找</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 类:

固定顶:

实例

<div class="w3-top">

  <div class="w3-bar">

    ...

    ...

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

固定底:

实例

<div class="w3-bottom">

  <div class="w3-bar">

    ...

    ...

  </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

垂直导航栏

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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

折叠导航栏

当导航栏在小屏幕上占用过多空间,并且您不想默认垂直显示时,可以在导航栏中的特定链接上使用隐藏和显示类。

在以下示例中,当在平板电脑和移动设备上显示时,导航栏将替换为右上角的按钮(☰)。单击该按钮时,导航栏中的链接将垂直堆叠:

实例

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


尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号