利用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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
基于JQUERY的多级联动代码
Jan 24 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 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调用JAVA的WebService简单实例
2014/03/11 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
一段实时更新的时间代码
2006/07/07 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
详解Python中dict与set的使用
2015/08/10 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
教师学习群众路线心得体会
2014/11/04 职场文书
2014年社区工作总结
2014/11/18 职场文书
预备党员入党感言
2015/08/01 职场文书