利用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 相关文章推荐
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
angular+webpack2实战例子
May 23 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
会计岗位职责模板
2014/03/12 职场文书
学生检讨书如何写
2014/10/30 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
小马王观后感
2015/06/11 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书