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 Icons 中了解更多关于如何在 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="搜索...">
<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** 类
垂直导航栏
**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** 类创建一个侧边导航
转到 下一章 了解更多关于侧边导航的信息。
