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">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
响应式导航
w3-mobile 类使任何条形元素都具有响应性（在大屏幕上是水平的，在小屏幕上是垂直的）。
中型和大型屏幕:
小屏幕:
实例
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 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">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
悬停链接
当您将鼠标悬停在按钮上时，背景颜色将变为灰色。
如果您想在悬停时使用不同的背景颜色，请使用任何 w3-hover-color 类:
实例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 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">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 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">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
右对齐链接
在列表项上使用 w3-right 类来右对齐特定链接:
实例
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 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">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
注释: 您还可以向导航栏添加填充，而不是每个按钮。 但是，如果您这样做，请注意链接在悬停时不会完全填充:
使用 CSS 宽度属性自定义链接的宽度
（注意:使用 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%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 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">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
亲自试一试 »
带输入和按钮的导航栏
实例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 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">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
亲自试一试 »
可点击的下拉菜单
如果您更喜欢点击下拉链接而不是悬停，请使用 w3-dropdown-click:
实例
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<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">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
亲自试一试 »
水平下拉菜单
如果您希望下拉链接水平显示而不是垂直显示，请从下拉容器中删除 w3-bar-block 类:
实例
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 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">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <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">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 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">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
亲自试一试 »
折叠导航栏
当导航栏在小屏幕上占用过多空间，又不想默认竖排显示时， 可以在导航栏中的特定链接上使用隐藏和显示类。
在下面的示例中，当在平板电脑和移动设备上显示时，导航栏被右上角的按钮 (☰) 替换。 单击按钮时，导航栏中的链接将垂直堆叠:
侧面导航
w3-sidebar 类创建侧边栏导航:
转到下一章了解有关侧边导航的更多信息。
