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 图标章节了解有关如何显示图标的更多信息。
导航栏文本
如果您想在导航栏内使用文本而不是按钮，请使用 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">Go</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 类创建侧边导航
转到 下一章 了解有关侧边导航的更多信息。
