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

W3.CSS 侧边导航



垂直导航栏

使用侧边导航,您可以选择以下几种:

  • 始终在页面内容的左侧显示导航窗格。
  • 使用可折叠的“全自动”响应式侧面导航。
  • 打开导航窗格,隐藏页面内容的左侧部分。
  • 打开导航窗格,隐藏所有的页面内容。
  • 打开导航窗格时,将页面内容向右移动。

Example: 始终显示侧边导航

<nav class="w3-sidenav w3-white" style="width:25%">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>

<div style="margin-left:25%">
... page content ...
</div>
尝试一下 »

可折叠响应式侧边导航

<nav class="w3-sidenav w3-collapse w3-white" style="width:200px">
  <a href="#" onclick="w3_close()" class="w3-closenav w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>

<div class="w3-main" style="margin-left:200px">
 <span class="w3-opennav w3-hide-large" onclick="w3_open()">&#9776;</span>
  ... page content ...
</div>

<script>
function w3_open() {
  document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
  document.getElementsByClassName(" w3-sidenav")[0].style.display = "none";
}
</script>
尝试一下 »

打开导航窗格隐藏内容的一部分

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
尝试一下 »

打开导航窗格隐藏所有内容

function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.width = "100%";
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
尝试一下 »

将内容向右移动

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.width = "25%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
  document.getElementsByClassName("w3-opennav")[0].style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
  document.getElementsByClassName("w3-opennav")[0].style.display = "inline-block";
}
尝试一下 »

Styling the Side Navigation

添加 w3-color 类到 w3-sidenav 可以改变其背景颜色。如果你想激活/显示选中当前链接,让用户知道他/她在哪个页面,添加 w3-color 类到其中一个链接:

Example

<nav class="w3-sidenav w3-light-grey">
  <a class="w3-green" href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
尝试一下 »

带有边框的侧边导航

使用 w3-border 类在侧边导航周围添加边框:

Example

<nav class="w3-sidenav w3-border">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
尝试一下 »

添加 w3-border-bottom 类到链接可创建链接分隔符:

Example

<nav class="w3-sidenav w3-border">
  <a class="w3-border-bottom" href="#">Link 1</a>
  <a class="w3-border-bottom" href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
尝试一下 »

使用 w3-card 类可以以卡片形式显示侧边导航:

Example

<nav class="w3-sidenav w3-card-8">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
尝试一下 »


悬停链接

当您将鼠标悬停在侧边导航内的链接时,背景颜色将变为灰色。

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

Example

<nav class="w3-sidenav">
  <a class="w3-hover-black" href="#">Link 1</a>
  <a class="w3-hover-green" href="#">Link 2</a>
  <a class="w3-hover-blue" href="#">Link 3</a>
  <a class="w3-hover-red" href="#">Link 4</a>
</nav>
尝试一下 »

侧边导航尺寸

Increased font-size (w3-large etc):

Increased padding (w3-padding etc):

Example

<nav class="w3-sidenav w3-large">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</nav>
尝试一下 »

带有图标的侧边导航

Example

<nav class="w3-sidenav w3-black" style="width:70px">
  <a href="#"><i class="fa fa-home w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-search w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-envelope w3-xxlarge"></i></a>
  <a href="#"><i class="fa fa-globe w3-xxlarge"></i></a>
</nav>
尝试一下 »

带有下拉菜单的侧边导航

Example

<nav class="w3-sidenav w3-light-grey">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <div class="w3-dropdown-hover">
    <a 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>
  </div>
  <a href="#">Link 3</a>
</nav>
尝试一下 »

提示: 当下拉菜单为“打开”时,下拉链接将获得灰色背景颜色,表示其处于选中状态。 要覆盖此,请将 w3-hover-color 类添加到 "下拉菜单" <li> 和 <a>。


带有手风琴的侧边栏

Example

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
  <a href="#">Link</a>
  <div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" 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>
  </div>
  <a href="#">Link</a>
  <a href="#">Link</a>
</nav>

尝试一下 »


带有动画效果的侧边导航

使用 w3-animate-classes 类来淡化,缩放或滑动侧边导航:

Example

<nav class="w3-sidenav w3-animate-left">
尝试一下 »

侧边导航内容

在侧边导航中添加任何您喜欢的内容:

Example

<nav class="w3-sidenav w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>Menu</h4>
  </div>

  <img src="img_fjords.jpg">

  <a class="w3-red" href="#">Home</a>
  <a href="#">Projects
    <span class="w3-tag w3-red w3-round w3-right">8</span>
  </a>
  <a href="#">About</a>
  <a href="#">Contact</a>

  <div class="w3-container">
    <div class="w3-border w3-round w3-padding w3-blue-grey">
      <span class="w3-closebtn">x</span>
      <p>Lorem ipsum box...</p>
    </div>
  </div>
</nav>
尝试一下 »