W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 导航



W3.CSS 提供各种导航栏:


基本导航

w3-navbar 类创建一个水平导航栏:

Example

<ul class="w3-navbar w3-black">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
尝试一下 »

彩色导航栏



Example

<ul class="w3-navbar w3-light-grey">
<ul class="w3-navbar w3-green">
<ul class="w3-navbar w3-blue">
尝试一下 »

边框导航栏



Example

<ul class="w3-navbar w3-border w3-light-grey">
<ul class="w3-navbar w3-border w3-round w3-light-grey">
<ul class="w3-navbar w3-card-8 w3-light-grey">
尝试一下 »

激活/当前链接

Example

<ul class="w3-navbar w3-border w3-light-grey">
  <li><a class="w3-green" href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
尝试一下 »

悬停链接

当您将鼠标悬停在导航栏中的链接上时,背景颜色将变为灰色。

如果您希望在悬停时显示不同的背景颜色,请使用 w3-hover-color 类,如果您希望在悬停时显示不同的文本颜色,请使用 w3-hover-text-color 类:


Example

<ul class="w3-navbar w3-border w3-light-grey">
  <li><a class="w3-hover-red" href="#">Home</a></li>
  <li><a class="w3-hover-blue" href="#">Link 1</a></li>
  <li><a class="w3-hover-green" href="#">Link 2</a></li>
  <li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul>
尝试一下 »

右对齐链接

Example

<ul class="w3-navbar w3-light-grey w3-border">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="w3-right"><a class="w3-green" href="#">Link 3</a></li>
</ul>
尝试一下 »

导航栏尺寸

更改字体大小:


Example

<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green w3-xlarge">
尝试一下 »

更改填充:


Example

<ul class="w3-navbar w3-green">
  <li><a class="w3-padding-16" href="#">Home</a></li>
  <li><a class="w3-padding-16" href="#">Link 1</a></li>
  <li><a class="w3-padding-16" href="#">Link 2</a></li>
  <li><a class="w3-padding-16" href="#">Link 3</a></li>
</ul>
尝试一下 »

使用 CSS width 属性自定义列表项宽度(注意: 在小屏幕上,它们将变成100%):

Example

<ul class="w3-navbar w3-dark-grey w3-center">
  <li style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
  <li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul>
尝试一下 »


带有图标的导航栏

Example

<ul class="w3-navbar w3-light-grey w3-border w3-large">
  <li><a class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
  <li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul>
尝试一下 »

带有下拉菜单的导航

Move the mouse over the "Dropdown" link:

Example

<ul class="w3-navbar w3-card-2 w3-light-grey">
  <li><a href="#">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li class="w3-dropdown-hover">
    <a href="#">Dropdown</a>
    <div class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
尝试一下 »

注意: 当下拉菜单 "打开" 时,下拉链接将获得灰色的背景颜色,表示它是当前激活选中的。 要覆盖默认颜色,请将 w3-hover-color 类添加到 "下拉菜单" <li> 和 <a> 中:

提示: 如果您想在下拉列表文本旁边添加一个下拉符号,请添加一个合适的图标 (如 ):

Example

<li class="w3-dropdown-hover w3-hover-orange">
  <a class="w3-hover-orange" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
  <div class="w3-dropdown-content w3-white w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
尝试一下 »

如果您希望点击下拉链接而不是悬停,请使用 w3-dropdown-click 类:

Example

<li class="w3-dropdown-click">
  <a onclick="myFunction()" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
  <div id="demo" class="w3-dropdown-content w3-white w3-card-4">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</li>
尝试一下 »

固定导航栏

当用户滚动页面时,要强制导航栏停留在页面的顶部或底部,在 <ul> 周围包裹一个 <div> 元素,并添加 w3-topw3-bottom 类:

固定在顶部

<div class="w3-top">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
尝试一下 »

固定在底部

<div class="w3-bottom">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
尝试一下 »

折叠导航栏

当导航栏在小屏幕上占用太多的空间,并且您不想在默认情况下垂直显示时,可以使用实用程序类来隐藏和显示导航栏中的特定链接。

在下面的实例中,在平板电脑和移动设备上显示时,右上角的导航栏将被替换成按钮(☰)。单击按钮时,导航栏将垂直显示:

Example

尝试一下 »

Topnav

导航栏的另一个例子是 w3-topnav 类。 它类似于 w3-navbar ,除了当您将鼠标悬停在链接上而不是背景颜色时,它会添加下划线:

Example

<nav class="w3-topnav w3-green">
  <a href="#">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>
尝试一下 »

Example 使用 Font Awesome 图标

<nav class="w3-topnav w3-green">
  <a href="#"><i class="fa fa-home"></i></a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>
尝试一下 »

侧边栏导航

w3-sidenav 类创建一个垂直导航栏:

查看 下一章 您将了解到侧边导航的更多知识。