利用js编写响应式侧边栏


Posted in Javascript onSeptember 17, 2016

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
几种响应式文字详解
May 19 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
react国际化react-intl的使用
May 06 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 #Javascript
JavaScript编写一个简易购物车功能
Sep 17 #Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 #Javascript
Bootstrap响应式侧边栏改进版
Sep 17 #Javascript
H5用户注册表单页 注册模态框!
Sep 17 #Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 #Javascript
JavaScript职责链模式概述
Sep 17 #Javascript
You might like
PHP与MySQL交互使用详解
2006/10/09 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
理解JS绑定事件
2016/01/19 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
基于Django用户认证系统详解
2018/02/21 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
邮政员工辞职信
2014/01/16 职场文书
信访工作者先进事迹
2014/01/17 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
合作协议书范文
2014/08/20 职场文书
初三语文教学计划
2015/01/22 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server