[ HTML + CSS + jQuery ] 实现侧边栏sidebar：点击底部导航栏上的按钮打开侧边栏，从右向左滑出，再次点击按钮收起

一个简单有效的侧边栏实现办法

今天在做项目的时候，需要实现一个侧边栏效果，一开始想到用Bootstrap，但是collapse这样的组件只能向下或向上打开，于是在网上研究了一阵，总结出目前觉得效果理想的最简单的办法。

效果示例：

HTML代码：

<!-- 为方便看清楚，这里去掉了自定义的Bootstrap样式，只写关联的代码 -->

<!-- 固定在底部的导航栏 -->
<nav class="nav fixed-bottom">
    <a href="#" class="nav-item nav-link active">主页</a>
    <a href="#" class="nav-item nav-link">导航1</a>
    <a href="#" class="nav-item nav-link">导航2</a>
    <!-- 触发侧边栏的按钮 -->
    <button type="button" id="sidebarToggler">打开侧边栏</button>
</nav>
<!-- 侧边栏区域的内容示例 -->
<div id="sideBar" class="sidebarClass">
   <ul>
       <li>侧边栏菜单项1</li>
       <li>侧边栏菜单项2</li>
       <li>侧边栏菜单项3</li>
   </ul>
</div>

CSS代码：

/* 如果需要侧边栏跨过底部导航栏，先需要知道导航栏的高度 */
nav {
    height: 2.5rem;
}
/* 一定要写在class选择器里！等会儿jquery要用到 */
.sidebarClass {
    position: fixed;    /* 先给个定位，侧边栏一般是相对于浏览器定位 */
    right: -50%;    /* 侧边栏有多宽，就-多少，相当于先藏在视窗外边（从左边打开的话就换成left） */
    width: 50%;
    height: calc(100vh - 2.5rem);    /* 减去底部导航栏的高度 */
    z-index: 9999;    /* 设置一个超大的数字覆盖所有元素，如果层叠不够或者未设置，那么侧边栏可能会被其他元素遮挡 */
    transition: width 1s;    /* 最关键的一步！利用transition实现过渡效果，这里只需要水平过渡，所以width就行了，后面的时间几秒自行设置 */
}
/* 新建一个class，等会儿jquery要用到，原理也是利用transition：width改变就会启动过渡效果 */
.addWidth {
    width: 100%;    /* 设置为侧边栏宽度的2倍，才能完全露出 */
}

jQuery代码：

//当然是定义按钮的点击事件啦
$("#sidebarToggler").click(function () {
    var sideBar = $("#sideBar");
    //我的逻辑上是先判断没有这个class，没有的话就添加，这个添加动作会触发宽度加长的过渡效果
    if (!sideBar.hasClass("addWidth")) {
        $("#sideBar").addClass("addWidth");
    }
    //同理，展开之后要切换，移除这个class来触发减小宽度的过渡效果
    else {
        $("#sideBar").removeClass("addWidth");
    }
})

Over.

---