W3.CSS Sidebar (侧栏)

2020-12-03 17:45 更新

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";

}


尝试一下 »
点击“尝试一下”按钮查看在线实例

可折叠响应式侧栏

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

右侧可折叠侧栏

实例

<script>

function w3_open() {

  document.getElementById("mySidebar").style.display = "block";

}

function w3_close() {

  document.getElementById("mySidebar").style.display = "none";

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例

左右侧栏

实例

<script>

function openLeftMenu() {

  document.getElementById("leftMenu").style.display = "block";

}

function closeLeftMenu() {

  document.getElementById("leftMenu").style.display = "none";

}

function openRightMenu() {

  document.getElementById("rightMenu").style.display = "block";

}

function closeRightMenu() {

  document.getElementById("rightMenu").style.display = "none";

}

</script>


尝试一下 »
点击“尝试一下”按钮查看在线实例

彩色侧栏

添加 w3-color 类的 w3-sidebar 来改变背景颜色。如果您想要一个活动/当前链接,要让用户知道他/她所在的页面,请将 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">


尝试一下 »
点击“尝试一下”按钮查看在线实例

悬停链接

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

如果要在悬停时使用不同的背景色,请使用任何 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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

侧栏尺寸

实例

<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-hover-color 类添加到“下拉列表” <div>和<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-animate 类来淡入,缩放或滑动侧面导航:

实例

<div class="w3-sidebar w3-animate-left">

尝试一下 »
点击“尝试一下”按钮查看在线实例

带有叠加效果的侧栏

w3-overlay 类可用于打开所述边栏时创建的覆盖效果。w3-overlay 类向“页面内容”添加了不透明度为50%的黑色背景-此效果将“突出显示”侧面导航。

实例

<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">主页</a>

  <a href="#" class="w3-bar-item w3-button">项目

    <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>


尝试一下 »
点击“尝试一下”按钮查看在线实例


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号