cari

Rumah >hujung hadapan web >tutorial js >利用js编写响应式侧边栏实例

利用js编写响应式侧边栏实例

PHPz
PHPzasal
2017-04-03 15:53:391223semak imbas

为了练手，自己学敲网站时刚好碰到需要制作侧边栏，在网上也查了各种插件以及框架都可以实现这个功能，但是想自己学着用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>
	<p class="container">
		<p class="header">
			<p class="nav-icon">
				<span></span>
				<span></span>
				<span></span>
			</p>
		</p>
		<p class="content">侧边栏内容</p>
		<p class="sideBar">
			<p class="sideBar-left">
				<p class="pider"></p>
				<p class="body-content">
					<p class="messageWarning item">
						<p><i class="message_icon"></i>消息提醒</p>
						<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>
					</p>
					<p class="course item">
						<p><i class="icon"></i>课程</p>
						<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>
					</p>
					<p class="myHome item">
						<a href="javascript:void()">
							<i class="home_icon"></i>我的主页
						</a>
					</p>
					<p class="exit item">
						<a href="javascript:void()">
							<i class="exit_icon"></i>退出
						</a>
					</p>
				</p>				
			</p>
			<p class="sideBar-right"></p>
		</p>		
	</p>
</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 .pider{
	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);
}

Atas ialah kandungan terperinci 利用js编写响应式侧边栏实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS实现响应式的简单代码Artikel seterusnya：js发布订阅者模式详细的个人理解

Artikel berkaitan

Lihat lagi