W3.CSS 导航栏

W3.CSS 导航栏类

W3.CSS 为导航栏提供了以下类：

基本导航

这个w3-酒吧class 是水平显示 HTML 元素的容器。

这个w3 栏项目类定义容器元素。

它是创建导航栏的完美工具：

响应式导航

这个w3-移动class 使任何栏元素具有响应性（大屏幕上水平，小屏幕上垂直）。

彩色导航栏

用一个w3-颜色向导航栏添加颜色的类：

有边框的导航栏

用一个w3边框或者w3卡类在导航栏周围添加边框，或将其显示为卡片：

活动/当前链接

添加一个w3-颜色类到链接以突出显示它：

悬停链接

当您将鼠标悬停在按钮上时，背景颜色将变为灰色。

如果您想在悬停时使用不同的背景颜色，请使用以下任意一种w3-悬停-颜色课程：

如果您想更改文本颜色，请使用以下命令关闭默认悬停效果w3-悬停-无类，并添加一个w3-悬停文本类。

花一些时间尝试一下不同的悬停效果：

右对齐链接

使用w3-右列表项上的类以右对齐特定链接：

导航栏尺寸

用一个w3 尺寸类来更改导航栏中链接的字体大小：

用一个w3-填充类来更改导航栏中每个链接的填充：

笔记：您还可以向导航栏添加填充，而不是每个按钮。但是，如果您这样做，请注意链接在悬停时不会获得完整填充：

使用 CSS width 属性自定义链接的宽度

（笔记： 使用w3-移动在小屏幕上将链接转换为 100% 宽度）：

带图标的导航栏

导航栏文本

如果您想要在导航栏中使用文本而不是按钮，请使用w3 栏项目类以获得与按钮相同的填充。

带有输入和按钮的导航栏

带下拉菜单的导航栏

将鼠标移到 "Dropdown" 链接上：

可点击的下拉菜单

使用w3-下拉-单击如果您更喜欢单击下拉链接而不是悬停：

水平下拉菜单

如果您希望下拉链接水平显示而不是垂直显示，请从下拉容器中删除 w3-bar-block 类：

带有响应式下拉菜单的响应式导航栏

在包括下拉容器在内的所有链接上使用 w3-mobile 类，以创建带有响应式下拉链接的响应式导航栏。

调整浏览器窗口大小查看效果：

固定导航栏

要强制导航栏保留在页面的顶部或底部，即使用户滚动页面，也可以在导航栏周围包裹一个 <div> 元素，并添加w3-顶部或者w3-底部类：

垂直导航栏

这个w3-酒吧-块class 是垂直显示 HTML 元素的容器。

折叠导航栏

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

在下面的示例中，当在平板电脑和移动设备上显示时，导航栏被右上角的按钮 (☰) 取代。单击按钮时，导航栏中的链接将垂直堆叠：

侧面导航

这个w3-侧边栏类创建侧面导航：

前往下一章了解有关侧面导航的更多信息。