您的位置：首页 > Web前端 > JavaScript

利用js编写响应式侧边栏

2016-09-17 00:00 681 查看

为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用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中实现无缝滚动、分享到侧边栏实例代码
JS运动框架之分享侧边栏动画实例
javascript实现动态侧边栏代码
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
简单的jquery左侧导航栏和页面选中效果
jQuery固定浮动侧边栏实现思路及代码
Jquery实现侧边栏跟随滚动条固定（兼容IE6）
jQuery侧边栏随窗口滚动实现方法
jQuery插件PageSlide实现左右侧栏导航菜单

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 响应式侧边栏

相关文章推荐

新的分享

章节导航