最适合网络开发者的网站
HTML CSS JavaScript SQL PYTHON PHP 引导 如何 W3.CSS JQUERY XML JAVA 更多的 🔍 ◑ 图书 参考 练习
W3CSS。初学者课程

尿素

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>
亲自尝试 »

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

例子

函数 w3_open() {
document.getElementById (“mySidebar”)。style.display = “block”;
}

函数 w3_close() {
document.getElementById (“mySidebar”)。style.display = “none”;
}
亲自尝试 »

打开内容上的侧边栏导航

例子

函数 w3_open() {
document.getElementById (“mySidebar”)。style.width = “100%”;
document.getElementById (“mySidebar”)。style.display = “block”;
}

函数 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()"&gt;关闭 ×
<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()">☰</button>
  <div class="w3-container">
<h1>我的页面</h1>
  </div>
  </div>
</div>

<script>
函数 w3_open() {
document.getElementById (“mySidebar”)。style.display = “block”;
}

函数 w3_close() {
document.getElementById (“mySidebar”)。style.display = “none”;
}
</script>
亲自尝试 »

将页面内容向右滑动

例子

函数 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';
}

函数 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%;右：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()"&gt;关闭 ×
<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()">☰</button>
  <div class="w3-container">
<h2>我的页面</h2>
  </div>
</div>

</div>

<script>
函数 w3_open() {
document.getElementById (“mySidebar”)。style.display = “block”;
}

函数 w3_close() {
document.getElementById (“mySidebar”)。style.display = “none”;
}
</script>
亲自尝试 »

左侧和右侧导航

例子

亲自尝试 »

侧面导航样式

添加 w3-颜色 类添加到 w3-sidebar 以更改背景颜色。如果您想要一个活动/当前链接，以便让用户知道他/她在哪个页面上，请添加 w3-颜色 类到其中一个链接：

链接 1 链接 2 链接 3 链接 4

链接 1 链接 2 链接 3 链接 4

链接 1 链接 2 链接 3 链接 4

例子

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

带边框的侧边导航

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

链接 1 链接 2 链接 3

例子

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

添加 w3-边框底部 类到链接来创建链接分隔符：

链接 1 链接 2 链接 3

例子

<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-卡 将侧面导航显示为卡片的类：

链接 1 链接 2 链接 3

例子

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

悬停链接

当将鼠标悬停在条形块内的链接上时，背景颜色将变为灰色。

如果您希望在悬停时使用不同的背景颜色，请使用 w3-悬停颜色 课程：

链接 1 链接 2 链接 3 链接 4

例子

<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 类。这通常用于当您只想在悬停时突出显示文本颜色（而不是背景颜色）时：

链接 1 链接 2 链接 3 链接 4

例子

<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 等）：

链接 1 链接 2 链接 3

增加填充（w3-padding 等）：

链接 1 链接 2 链接 3

例子

<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">落下<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>
亲自尝试 »

提示： 当下拉菜单处于“打开”状态时，下拉链接将呈现灰色背景颜色，以表明它处于活动状态。要覆盖此设置，请添加w3-悬停颜色 类到“下拉”<div> 和<a>。</a>

带手风琴功能的侧边栏

例子

<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()">落下</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-动画-类 淡入、放大或滑动侧边导航：

例子

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

侧边栏覆盖

这 w3-覆盖 类可用于在打开侧边栏时创建叠加效果。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>

<!-- Page content -->
<button class="w3-button w3-xxlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>侧边栏覆盖</h1>
<p>点击“汉堡”图标即可在侧边导航中滑动。</p>
</div>

<!-- JS to open and close sidebar with overlay effect -->
<script>
函数 w3_open() {
document.getElementById (“mySidebar”)。style.display = “block”;
document.getElementById (“myOverlay”).style.display = “块”;
}

函数 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">家</a>
<a href="#" class="w3-bar-item w3-button">项目</a>
<span class="w3-tag w3-red w3-round w3-right">8</span>
  </a>
<a href="#" class="w3-bar-item w3-button">关于</a>
<a href="#" class="w3-bar-item w3-button">接触</a>

  <div class="w3-panel w3-blue-grey w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem ipsum 框...</p>
  </div>
 </div>
亲自尝试 »
❮ 上一页 下一个 ❯