利用js编写响应式侧边栏

来源：互联网发布：mysql 链接工具编辑：程序博客网时间：2024/06/07 09:56

为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用js原生学一个试试，于是就初略完成了侧边栏的实现，可以让初学者参考参考，代码能力有限。

其中主要设计的就是animate（）函数，animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。更多的使用请自己去搜索，我就不具体介绍了。另外就是利用了媒体查询的方法，通过检测当前设备的屏幕大小进行调整侧边栏的大小设计。媒体查询的方法可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

接下来是具体的实现，附上代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"/><title>侧边栏</title><link  href="css/sideBar.css" rel="stylesheet" type="text/css" /></head><body><div class="container"><div class="header"><div class="nav-icon"><span></span><span></span><span></span></div></div><div class="content">侧边栏内容</div><div class="sideBar"><div class="sideBar-left"><div class="divider"></div><div class="body-content"><div class="messageWarning item"><div><i class="message_icon"></i>消息提醒</div><ul><li class="news"><i class="circle"></i><a href="javascript:void()">消息1</a></li><li class="news"><i class="circle"></i><a href="javascript:void()">消息2</a></li><li class="news"><i class="circle"></i><a href="javascript:void()">消息3</a></li><li class="news"><i class="circle"></i><a href="javascript:void()">消息4</a></li></ul></div><div class="course item"><div><i class="icon"></i>课程</div><ul><li class="myInfo"><i class="circle"></i><a href="javascript:void()">我的课程</a></li><li class="Dynamic"><i class="circle"></i><a href="javascript:void()">课程动态</a></li><li class="question"><i class="circle"></i><a href="javascript:void()">问题空间</a></li><li class="homework"><i class="circle"></i><a href="javascript:void()">课程作业</a></li></ul></div><div class="myHome item"><a href="javascript:void()"><i class="home_icon"></i>我的主页</a></div><div class="exit item"><a href="javascript:void()"><i class="exit_icon"></i>退出</a></div></div></div><div class="sideBar-right"></div></div></div></body><script src="js/jquery-2.1.4.min.js"></script><script src="js/sideBar.js"></script></html>

js实现：

$(function(){var windowWidth = $(window).width();var windowHeight = $(window).height();var sideBarWidth = windowWidth*0.8;//设置侧边栏左边宽度与右边高度$(".sideBar-left").height(windowHeight);$(".sideBar-right").height(windowHeight);//侧边栏由左向右滑动$(".nav-icon").on("click",function(){$(".sideBar").animate({left: "0"},350);});//点击退出，侧边栏由右向左滑动$(".exit").on("click",function(){$(".sideBar").animate({left: "-100%"},350);});})

css设计：

*{margin: 0;}a{color: #fff;text-decoration: none;}.container{width: 100%;height: 100%;min-width: 280px;position: relative;}.header{background: #0C7AB3;list-style: none;}.nav-icon{width: 30px;background: #0C7AB3;padding: 8px;}.nav-icon span{display: block;border: 1px solid #fff;margin: 4px;width: 20px;}.nav-icon:hover{cursor: pointer;}.sideBar{width: 100%;position: absolute;top: 0px;left: -100%;}.sideBar-left{width: 75%;background: #fff;float: left;background-color: #343A3E;}.sideBar-left .divider{width: 80%;height: 6px;margin-top: 30px;padding-left: 15px;background-color: #3099FF;}.sideBar-left .body-content{width: 80%;margin-top: 15px;padding: 15px 0 15px 15px;border-top: 2px solid #3099FF;color: #EFEFEF;}.body-content .item{margin: 4px;}.item ul{list-style: none;margin-left: -24px;}.item ul li{margin:8px;}.item .circle{width: 10px;height: 10px;margin-right: 10px;border-radius: 50%;background-color: #3099FF;display: inline-block;}.sideBar-right{width:25%;display: inline-block;background-color: rgba(0, 0, 0, 0.5);}

1 0