码农教程 - 一技在手,衣食无忧! tools

W3.CSS 侧边栏

❮ 上一节 下一节 ❯

W3.CSS 垂直导航栏

通过侧面导航，您有多种选择：

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

始终显示侧边栏

示例

<div class="w3-sidebar w3-bar-block" style="width:25%">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-left:25%">
... page content ...
</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()">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 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>My Page</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">Menu</h5>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-right:25%">
... page content ...
</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()">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 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>My Page</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-颜色类到 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">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 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">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-green">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
</div>
亲自试一试»

您可以使用以下命令关闭默认悬停效果w3-悬停-无类。当您只想在悬停时突出显示文本颜色（而不是背景颜色）时，通常会使用此方法：

链接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">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link 3</a>
</div>
亲自试一试»

侧面导航尺寸

增加字体大小（w3-large 等）：

链接1 链接2 链接3

增加填充（w3-填充等）：

链接1 链接2 链接3

示例

<div class="w3-sidebar w3-bar-block w3-large">
  <a href="#" class="w3-bar-item w3-button">Link</a>
  <a href="#" class="w3-bar-item w3-button">Link</a>
  <a href="#" class="w3-bar-item w3-button">Link</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">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 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">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
亲自试一试»

提示：当下拉菜单为 "open" 时，下拉链接将获得灰色背景颜色以指示其处于活动状态。要覆盖它，请添加一个w3-悬停颜色"dropdown" <div> 和 <a> 的类。

带有手风琴的侧边栏

示例

<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
  <div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</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">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

亲自试一试 »

动画侧边栏

使用任何w3-动画-类淡入淡出、缩放或滑动侧面导航：

示例

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

侧边栏覆盖

这个w3-覆盖类可用于在打开侧边栏时创建叠加效果。 w3-overlay 类向 "page content" 添加不透明度为 50% 的黑色背景 - 此效果将 "highlight" 侧面导航。

示例

<!-- 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()">Close</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 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()">&#9776;</button>
<div class="w3-container">
  <h1>Sidebar Overlay</h1>
  <p>Click on the "hamburger" icon to slide in the side navigation.</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>Menu</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>
亲自试一试»

❮ 上一节 下一节 ❯