js を使用してレスポンシブなサイドバーの例を作成する-jsチュートリアル-php.cn

js を使用してレスポンシブなサイドバーの例を作成する

PHPz

リリース： 2017-04-03 15:53:39

オリジナル

1188 人が閲覧しました

ウェブサイトの入力を学習していたときに、スキルを練習するためにたまたまサイドバーを作成する必要があり、この機能を実現するためにインターネット上のさまざまなプラグインやフレームワークも調べましたが、それを学びたかったのです。 jsをネイティブに使って試してみますので、サイドバーの実装はひとまず完成しており、初心者の参考にはなりますが、コーディング能力には限界があります js を使用してレスポンシブなサイドバーの例を作成する。

主な設計は animate() 関数であり、animate() メソッドは CSS プロパティセットのカスタムアニメーションを実行します。このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティ値は徐々に変化し、アニメーション効果を作成できます。アニメーション化できるのは数値のみです（例: 「マージン:30px」)。文字列値はアニメーション化できません（「background-color:red」など）。詳しくは紹介しませんので詳しくはご自身で検索してください。さらに、メディアクエリ方式を使用して、現在のデバイスの画面サイズを検出してサイドバーのサイズ設計を調整します。メディアクエリメソッドを使用すると、特にレスポンシブなページをデザインする必要がある場合に、さまざまな画面サイズに応じてさまざまなスタイルを設定できます。

以下はコードが添付された具体的な実装です: reee js 実装:

<!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>

ログイン後にコピー

CSSデザイン:

$(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);
	});

})

ログイン後にコピー

以上がjs を使用してレスポンシブなサイドバーの例を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。