利用js编写响应式侧边栏

原创 2016年08月30日 15:15:08

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




版权声明:本文为博主原创文章,如需要转载,请标明文章出处,谢谢。

改进Bootstrap中的响应式侧边栏

侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在Bootstrap的框架中提供了导航条和下拉菜单的组件,详情请自行到Bootstra...

js实现侧边栏分享到特效

  • 2013年05月28日 16:16
  • 1KB
  • 下载

侧边栏所需js

  • 2017年11月01日 14:28
  • 37KB
  • 下载

基于slideout.js实现的移动端侧边栏滑动特效

看看我们将要介绍的slideout.js,能帮我们实现怎么样的移动端侧边栏滑动特效呢...

侧边栏tab(css版本+js版本)

  • 2010年10月08日 11:48
  • 45KB
  • 下载

js实现侧边栏效果

模仿淘宝的侧边栏效果 最终实现的效果图如下所示 该侧边栏对应的html代码如下 需要说明的是该实例中的图标都是通过引用bootstrape中的图标实现的。另外,菜单项中的li的id和菜单项所...

JS运动框架之分享侧边栏动画

JS运动框架之分享侧边栏动画 *{ margin:0px; padding:0px; } #div1{ width:319px; h...

JS实现侧边栏鼠标经过弹出框+缓冲效果

可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。 首先,我们用两个div来简单布局以下页面: 分享到 这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,...

【JS】网页悬浮广告及联系QQ客服侧边栏

网页悬浮广告及联系QQ客服侧边栏,广告跳动效果,及QQ客服隐藏效果 var w3c = (document.getElementById) ? true : false; var agt = ...
  • wzl505
  • wzl505
  • 2016年10月31日 11:30
  • 186

Bootstrap的js插件之侧边栏停靠(affix)

下面是一个比较常见的侧边栏停靠的例子: js插件_侧边栏停靠 --> .affixed-elemen...
  • bboyjoe
  • bboyjoe
  • 2015年08月08日 15:23
  • 4240
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用js编写响应式侧边栏
举报原因:
原因补充:

(最多只允许输入30个字)