W3.CSS Navigation Bars (导航栏)
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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
您也可以向导航栏添加填充，而不是每个按钮添加。但是，如果这样做，请注意，链接不会在悬停时获得完全填充：
使用 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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
导航栏带有输入和按钮
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
带有下拉菜单的导航栏
将鼠标移到“下拉”链接上：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
折叠导航栏
当导航栏在小屏幕上占用过多空间，并且您不想默认垂直显示时，可以在导航栏中的特定链接上使用隐藏和显示类。
在以下示例中，当在平板电脑和移动设备上显示时，导航栏将替换为右上角的按钮（☰）。单击该按钮时，导航栏中的链接将垂直堆叠：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例