利用js编写响应式侧边栏

更新时间：2021年10月18日 11:08:23 作者：u010297791

这篇文章主要为大家详细介绍了利用js编写响应式侧边栏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

面试判断元素是否在可视区域中IntersectionObserver详解
这篇文章主要为大家介绍了判断元素是否在可视区域中IntersectionObserver面试详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
javascript加载xml 并解析各节点的值(实现方法)
下面小编就为大家带来一篇javascript加载xml 并解析各节点的值(实现方法)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
bootstrap导航条实现代码
这篇文章主要为大家详细介绍了bootstrap导航条的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
javascript 函数及作用域总结介绍
本文是对javascript在的函数及作用域进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
如何使用TS对axios的进行简单封装
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,这篇文章主要给大家介绍了关于如何使用TS对axios的进行简单封装的相关资料,需要的朋友可以参考下
2022-10-10
javascript实现3D变换的立体圆圈实例
这篇文章主要介绍了javascript实现3D变换的立体圆圈效果,涉及javascript动态操作页面元素实现滚动与变色的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
详解JavaScript中localStorage使用要点
localStorage主要用来替代cookie，解决cookie(可参考cookie使用要点)读写困难、容量有限的问题，对js localstorage的使用相关知识感兴趣的朋友一起学习吧
2016-01-01
JavaScript创建防篡改对象的方法分析
这篇文章主要介绍了JavaScript创建防篡改对象的方法,结合具体实例形式分析了javascript基于不可扩展对象、密封的对象和冻结的对象实现防篡改对象的相关操作技巧,需要的朋友可以参考下
2018-12-12
JS中new Blob()详解及blob转file示例
这篇文章主要给大家介绍了关于JS中new Blob()详解及blob转file的相关资料,Blob Blob(Binary Large Object)表示二进制类型的大对象,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11
babel7按需加载polyfill示例详解
这篇文章主要为大家介绍了babel7按需加载polyfill示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02