为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用js原生学一个试试，于是就初略完成了侧边栏的实现，可以让初学者参考参考，代码能力有限。
其中主要设计的就是animate（）函数，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。更多的使用请自己去搜索，我就不具体介绍了。另外就是利用了媒体查询的方法，通过检测当前设备的屏幕大小进行调整侧边栏的大小设计。媒体查询的方法可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。
接下来是具体的实现，附上代码：
rush:xhtml;">
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1"/>
<a href="https://www.jb51.cc/tag/cebianlan/" target="_blank" class="keywords">侧边栏</a>
侧边栏内容
课程