菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 侧边栏



W3.CSS 垂直导航栏

使用侧边导航,您有几种选择

  • 始终将导航窗格显示在页面内容的左侧
  • 使用可折叠的“全自动”响应式侧边导航
  • 在页面内容左侧打开导航窗格
  • 在所有页面内容上打开导航窗格
  • 打开导航窗格时将页面内容向右滑动
  • 将导航窗格显示在右侧而不是左侧

始终显示侧边栏

示例

<div class="w3-sidebar w3-bar-block" style="width:25%">
  <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 style="margin-left:25%">
... 页面内容 ...
</div>
自己试试 »


在内容的一部分上打开侧边栏导航

示例

function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
自己试试 »

在内容上打开侧边栏导航

示例

function w3_open() {
  document.getElementById("mySidebar").style.width = "100%";
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
自己试试 »

可折叠响应式侧边导航

示例

<div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
  <button class="w3-bar-item w3-button w3-hide-large"
  onclick="w3_close()">关闭 &times;</button>
  <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 class="w3-main" style="margin-left:200px">

<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h1>我的页面</h1>
  </div>
  </div>
</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
自己试试 »

将页面内容滑动到右侧

示例

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}

function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
自己试试 »

右侧侧边导航

示例

<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
  <h5 class="w3-bar-item">菜单</h5>
  <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 style="margin-right:25%">
... 页面内容 ...
</div>
自己试试 »

右侧可折叠导航

示例

<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0" id="mySidebar">
  <button class="w3-bar-item w3-button w3-hide-large"
  onclick="w3_close()">关闭 &times;</button>
  <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 class="w3-main" style="margin-right:200px">
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h2>我的页面</h2>
  </div>
</div>

</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
自己试试 »

左侧和右侧导航


侧边导航样式

为 w3-sidebar 添加 w3-color 类以更改背景颜色。如果您想突出显示当前链接(让用户知道他们在哪个页面上),也请为其中一个链接添加 w3-color 类。

示例

<div class="w3-sidebar w3-red">
自己试试 »

带边框的侧边导航

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

示例

<div class="w3-sidebar w3-border">
自己试试 »

为链接添加 w3-border-bottom 类以创建链接分隔符

示例

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">链接 1</a>
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">链接 2</a>
  <a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
自己试试 »

使用 w3-card 类将侧边导航显示为卡片

示例

<nav class="w3-sidebar w3-card">
自己试试 »

可悬停链接

当您将鼠标移到 bar block 中的链接上时,背景颜色将变为灰色。如果您希望在悬停时显示不同的背景颜色,请使用任何 w3-hover-color 类。

如果您想在悬停时显示不同的背景颜色,请使用任何 w3-hover-color

示例

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-hover-black">链接 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-green">链接 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">链接 3</a>
</div>
自己试试 »

您可以使用 w3-hover-none 类关闭默认的悬停效果。这通常用于您只想突出显示文本颜色(而不是背景颜色)在悬停时

示例

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">链接 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">链接 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">链接 3</a>
</div>
自己试试 »

侧边导航尺寸

增大字号(w3-large 等)

增大内边距(w3-padding 等)

示例

<div class="w3-sidebar w3-bar-block w3-large">
  <a href="#" class="w3-bar-item w3-button">链接</a>
  <a href="#" class="w3-bar-item w3-button">链接</a>
  <a href="#" class="w3-bar-item w3-button">链接</a>
</div>
自己试试 »

带图标的侧边导航

示例

<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
  <a href="#" class="w3-bar-item w3-button"><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>
</div>
自己试试 »

带下拉菜单的侧边栏

示例

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">链接 1</a>
  <a href="#" class="w3-bar-item w3-button">链接 2</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="w3-dropdown-content w3-bar-block">
      <a href="#" class="w3-bar-item w3-button">链接</a>
      <a href="#" class="w3-bar-item w3-button">链接</a>
    </div>
  </div>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
自己试试 »

提示: 当下拉菜单“打开”时,下拉链接将获得灰色背景颜色以指示它是活动的。要覆盖此设置,请为“dropdown”<div> 和 <a> 都添加 w3-hover-color 类。


带折叠面板的侧边栏

示例

<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
  <a href="#" class="w3-bar-item w3-button">链接 1</a>
  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">折叠面板</button>
  <div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
    <a href="#" class="w3-bar-item w3-button">链接</a>
    <a href="#" class="w3-bar-item w3-button">链接</a>
  </div>
  <div class="w3-dropdown-click">
    <button class="w3-button" onclick="myDropFunc()">Dropdown</button>
    <div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
      <a href="#" class="w3-bar-item w3-button">链接</a>
      <a href="#" class="w3-bar-item w3-button">链接</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">链接 2</a>
  <a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>

自己动手试一试 »


动画侧边栏

使用任何 w3-animate-classes 来淡入、缩放或滑动侧边导航

示例

<div class="w3-sidebar w3-animate-left">
自己试试 »

侧边栏覆盖

w3-overlay 类可用于在打开侧边栏时创建覆盖效果。w3-overlay 类为“页面内容”添加了 50% 透明度的黑色背景 - 这种效果会“突出”侧边导航。

示例

<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
  <button class="w3-bar-item w3-button" onclick="w3_close()">关闭</button>
  <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>

<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>

<!-- 页面内容 -->
<button class="w3-button w3-xxlarge" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
  <h1>侧边栏覆盖</h1>
  <p>单击“汉堡”图标以滑动侧边导航。</p>
</div>

<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>
自己试试 »

侧边栏内容

在侧边导航中随意添加您喜欢的内容

示例

<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>菜单</h4>
  </div>

  <img src="img_snowtops.jpg">

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

  <div class="w3-panel w3-blue-grey w3-display-container">
    <span class="w3-button w3-display-topright">X</span>
    <p>Lorem ipsum box...</p>
  </div>
 </div>
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持