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

W3.CSS 案例:添加导航



导航栏

导航条是在您的应用或网站中作为导航页头的响应式基础组件。

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>
尝试一下 »

侧边导航

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

  • 始终在页面内容的左侧显示导航。
  • 打开导航窗格,隐藏页面内容的左侧部分。
  • 打开导航窗格,隐藏所有的页面内容。
  • 打开导航窗格时,将页面内容向右移动。

以下实例打开导航窗格,隐藏页面内容的一部分:

<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</nav>

用于打开和隐藏菜单的JavaScript:

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