折叠式侧边栏
折叠式侧边栏：主要使用HTML+CSS有些许的JS
先是效果图，点击图标
HTML部分：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>side menu</title><link rel="stylesheet" href="../CSS/style.css"><script src="../js/js.js"></script></head><body><!--c查下nav元素--><nav class="navbar"><span class="open-side"><a href="#" onclick="opensidemenu()"><!--svg 以下为图标的样式 实现动画绘画 绘制出来的是矢量图 不像是像素图放大会模糊--><svg width="30" height="30"><path d="M0,5,30,5" stroke="white"stroke-width="5"/><path d="M0,14,30,14" stroke="white"stroke-width="5"/><path d="M0,23,30,23" stroke="white"stroke-width="5"/></svg></a></span><ul class="navbar-nav"><li><a href="#">home</a></li><li><a href="#">about</a></li><li><a href="#">services</a></li><li><a href="#">content</a></li></ul></nav><div id="side-menu" class="side-nav" ><!--图标--><a href="#" class="btn-close" onclick="closesidemenu()">×</a><a href="#">home</a><a href="#">about</a><a href="#">services</a><a href="#">content</a></div><div id="main"><h1>网络部</h1></div></body></html>
通过svg来绘制图标，当然也可以去图库搜索，后者更方便
赋予两图标onlick属性，使其点击产生效果
CSS部分：
*{padding: 0;margin: 0;}.body{font-family: Arial, Helvetica, sans-serif;background-color: #f4f4f4;}.navbar{background-color: #3b5998;overflow: hidden;/*不出现滚动条*/height: 63px;}.navbar a{float: left;display: block;color: #f2f2f2;text-align: center;text-decoration: none;/*取消下划线*/font-size: 17px;padding: 14px 16px;}.navbar ul{margin: 8px 0 0 0;list-style: none;/*圆点取消*/}.navbar a:hover{background-color: #ddd;color: #000;}.side-nav{height: 100%;width: 0;position: fixed;z-index: 1;top: 0;left: 0;background-color: #111;opacity: 0.9;/*透明度*/padding-top: 60px;overflow-x: hidden;transition: 0.5s;/*过渡周期*/}.side-nav a{padding: 10px 10px 10px 30px;text-decoration: none;font-size: 22px;color:#ccc ;display: block;transition: 0.3s;}.side-nav a:hover{color: orange;}.btn-close{position: absolute;top: 0;right: 22px;font-size: 36px;}#main{transition: margin-left 0.5s;/*使其有平稳的切换效果*/padding: 20px;}
CSS部分没什么东西就不做说明了
js部分：
/展开/function opensidemenu(){document.getElementById('side-menu').style.width='250px'document.getElementById('main').style.marginLeft='250px'}/收回/function closesidemenu(){document.getElementById('side-menu').style.width='0'document.getElementById('main').style.marginLeft='0'}
这回js部分也是相当的简单的，也不多说了
效果二：
当页面缩小到一定比例的时候产生该效果，实行方法也很简单，在原先的基础上在CSS部分加入@media属性，具体代码如下
@media(max-width: 568px){.navbar-nav{display: none;}}
至此，折叠式侧边栏就完成了
