首頁  >  文章  >  web前端  >  利用js編寫響應式側邊欄實例

利用js編寫響應式側邊欄實例

PHPz
PHPz原創
2017-04-03 15:53:391180瀏覽

為了練手,自己學敲網站時剛好碰到需要製作側邊欄,在網上也查了各種插件以及框架都可以實現這個功能,但是想自己學著用js原生學一個試試,於是就初略完成了側邊欄的實現,可以讓初學者參考參考,代碼能力有限利用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);
}

以上是利用js編寫響應式側邊欄實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn