レスポンシブ デザイン サンプル

今回はレスポンシブデザインのサンプルをご紹介します。

主にプレゼンテーション時や自己紹介で使えそうです。

ページ内容は書き「section」の間に記述します。


サンプルでは7ページ用意しています。

背景を変更する際には、main.cssのascensorFloorXXX内を変更してください。

<html>
	<head>
		<meta charset="utf-8">
		<title>サンプル9</title>
		<meta name = "viewport" content = "user-scalable=0,width=device-width,initial-scale=1,maximum-scale=1" />
		<link href="css/main.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="./Buttons/css/font-awesome.min.css">

	</head>
	<body onresize="pageReload()" onLoad="start()" link="#ffffff" vlink="#ffffff" alink="#ffffff">
		<div id="ascensorBuilding">
			<!--1ページ目 ここから-->
			<section id="ascensorFloor0" class="ascensorFloor">
			</section>
			<!--1ページ目 ここまで-->
			<!--2ページ目 ここから-->
			<section id="ascensorFloor1" class="ascensorFloor">
			</section>
			<!--2ページ目 ここまで-->

			<section id="ascensorFloor2" class="ascensorFloor">
				<article class="container">
					<h1>工事中</h1>
				</article>
			</section>

			<section id="ascensorFloor3" class="ascensorFloor;">
				<article class="container">
					<h1>工事中</h1>
				</article>
			</section>

			<section id="ascensorFloor4" class="ascensorFloor">
				<article class="container">
					<h1>工事中</h1>
				</article>
			</section>

			<section id="ascensorFloor5" class="ascensorFloor">
				<article class="container">
					<h1>工事中</h1>
				</article>
			</section>

			<section id="ascensorFloor6" class="ascensorFloor">
				<article class="container">
					<h1>工事中</h1>
				</article>
			</section>
		</div>

		<!--フッター-->
		<div id="footer">
			<div id="copyright">
		&copy;&nbsp;フッター
			</div>
		</div>
	
		<!--ナビゲーション(ぱんくずリスト)-->
		<div class = "entry_more" id="entry_more">
		<nav id="nav">
			<ul id="nav1" style="list-style:none;text-align: center;">
				<li id="li1" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 70px; right: 286px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink0" style="vertical-align: middle;" onclick="translucentElementChange('li1');">page1</a>
				</li>
				<li id="li2" style="z-index: 20000; position: fixed; width: 100px; height: 22px; bottom: 70px; right: 170px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink1" style="vertical-align: middle;" onclick="translucentElementChange('li2');">page2</a>
				</li>
				<li id="li3" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 70px; right: 100px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink2" style="vertical-align: middle;"  onclick="translucentElementChange('li3');">page3</a>
				</li>
				<li id="li4" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 70px; right: 30px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink3" style="vertical-align: middle;" onclick="translucentElementChange('li4');">page4</a>
				</li>
				<li id="li5" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 30px; right: 30px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink4" style="vertical-align: middle;" onclick="translucentElementChange('li5');">page5</a>
				</li>
				<li id="li6" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 30px; right: 100px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink5" style="vertical-align: middle;" onclick="translucentElementChange('li6');">page6</a>
				</li>
				<li id="li7" style="z-index: 20000; position: fixed; width: 56px; height: 22px; bottom: 30px; right: 170px; background-color:#FFFFFF;">
					<a class="ascensorLink ascensorLink6" style="vertical-align: middle;" onclick="translucentElementChange('li7');">page7</a>
				</li>
			</ul>
		</nav>
		</div>

		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script src="./js/jquery.ascensor.js"></script>
		<script src="./js/plugins.js"></script>
		<script>
			function start(){
				translucentElementChangeOnload('li1');
				fullscreenrResizer();
			}
			//フルスクリーン対応 ここから
			$('#ascensorBuilding').ascensor({
				Navig:true,
				ChocolateAscensor:true,
				time: 100,
				//ページ遷移のアニメーションの時間(ms)
				childType: 'section',
				direction:"chocolate",
				overflow:"hidden",
				easing: 'easeInOutQuad',
				queued: false,
				ascensorFloorName: ['li1','li2','li3','li4','li5','li6','li7'],
				keyNavigation: true,
				windowsOn: 0,
				queuedDirection: "y",
				//スクロールバーの非表示
				ascensorMap: [[0,0],[0,1],[0,2],[0,3],[1,3],[1,2],[1,1]]
				});
				
			//フルスクリーン対応 ここまで
			
			//ナビゲーション 画面サイズ変更、再読み込み対応 ここから
			function translucentElementChangeOnload(index) {
					var str = location.href;
					var last = str.slice("-3");
					if((last == "li1") || (last == "li2") || (last == "li3") || (last == "li4") || (last == "li5") || (last == "li6") || (last == "li7")){
						index = last;
					}
					
					
					beforeElement = index;
					var translucentElement = document.getElementById("entry_more");
					translucentElement.style.opacity = 0.75;
					translucentElement.style.MozOpacity = 0.75;
					translucentElement.style.filter = 'alpha(opacity = 75)';
					
					var translucentElementAct = document.getElementById(index);
					translucentElementAct.style.backgroundColor = '#008000';
					translucentElementAct.style.opacity = 1.00;
					translucentElementAct.style.MozOpacity = 1.00;
					translucentElementAct.style.filter = 'alpha(opacity = 100)';
			};

			var beforeElement = "";
			function translucentElementChange(index) {
				var translucentElementbefore = document.getElementById(beforeElement);
				translucentElementbefore.style.backgroundColor = '#FFFFFF';
				translucentElementbefore.style.opacity = 1.00;
				translucentElementbefore.style.MozOpacity = 1.00;
				translucentElementbefore.style.filter = 'alpha(opacity = 100)';
				beforeElement = index;

				var translucentElement = document.getElementById(index);
				translucentElement.style.backgroundColor = '#008000';
				translucentElement.style.opacity = 1.00;
				translucentElement.style.MozOpacity = 1.00;
				translucentElement.style.filter = 'alpha(opacity = 100)';
			};
			//ナビゲーション 画面サイズ変更、再読み込み対応 ここまで

			//ブラウザの画面サイズ変更時の対応
			//var reloadFlg = false;
			function pageReload(){
			
							//fullscreenrResizer();
				//if(reloadFlg)window.location.reload();
				//reloadFlg = true;
			}


		</script>
	
	</body>
</html>

上記コードのデモはこちら


Bookmark this on Yahoo Bookmark
Bookmark this on Google Bookmarks
Share on LinkedIn
LINEで送る
Pocket