menu
menu

レスポンシブなスマホ用ナビ | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook10
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0

レスポンシブなスマホ用ナビ

  • Labs

jQuery

こんにちは(・∀・)

 今回はスマホ用のナビゲーションをご紹介します。以前からご紹介してありますスマホサイトのメニューボタン(ハンバーガーボタン)をタップしてドロワーナビが展開するタイプとは異なり、ボタンをタップするとコンテンツの上にnav要素が展開してメニューを表示させるタイプのナビゲーションになります。サンプル1はボタンが右側、サンプル2はボタンが左側になります。PCサイトとスマホサイトのレスポンシブでレイアウトしてありますのでそのままレスポンシブレイアウトでご利用いただけます。

サンプルデモ

 サンプルデモはこちら!


 ブレークポイントは768px以下がスマホサイト、769px以上でPCサイトです。

 *スマホサイトでposition指定してありますのでPCサイトをレイアウトする際ご注意ください(staticで指定し直す必要があります)。


 animateでの動きが重く感じる場合はanimateを外してdisplay: none;、display: block;で制御すると動きが軽くなりますのでお試しください。


HTML

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="wrapper">
<div id="_btn">
<div id="nav_open"><img src="_btn.png" alt="menu"></div>
<!--_btn--></div>
<header>
<h1><a href="http://www.webdlab.com/">Webデザインラボ</a></h1>
</header>
<nav>
<div id="_btn2">
<div id="nav_close"><img src="_btn2.png" alt="Close"></div>
<!--_btn2--></div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div id="main">
<article>
<section>
<h2>サンプル</h2>
<p>スマホ用ナビ(レスポンシブ)のサンプルです。</p>
</section>
</article>
<!--main--></div>
<aside>
<p>Right</p>
</aside>
<footer>
<div class="closebtn"><a href="javascript: close()">このページを閉じる</a></div>
</footer>
<!--wrapper--></div>
CSS

/* 0 to 768px */
html {
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
}
body {
	width: 100%;
}
#wrapper {
	width: 100%;
	background: #eee;
	overflow: hidden;
}
#_btn {
	overflow: hidden;
	width: 100%;
	height: 46px;
	position: absolute;
	top: 10px;
	z-index: 3;
}
#_btn2 {
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
}
#nav_open {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 20px;
	width: 46px;
	height: 46px;
	cursor: pointer;
}
#nav_close {
	cursor: pointer;
	position: relative;
	right: 0;
}
#_btn img,
#_btn2 img {
	width: 46px;
	height: 46px;
	background: #444;
}
header {
	width: 100%;
	height: 120px;
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: #ddd;
}
header h1 {
	margin-top: 55px;
}
nav {
	display: none;
	overflow: hidden;
	position: absolute;
	z-index: 5;
	background: #444;
	width: 0;
	height: 0;
}
nav ul {
	margin: 35px 0 10px 0;
	overflow: hidden;
}
nav ul li {
	margin: 0 10px;
	padding: 10px 0;
	border-bottom: 1px solid #fff;
	font-size: 100%;
}
nav li a,
nav li a:link {
	display: block;
	color: #fff;
}
article {
	width: 100%;
	position: relative;
	z-index: 2;
	background: #fff;
}
article section {
	background: #9fb7d4;
	margin: 0 auto;
	overflow: hidden;
}
aside {
	width: 150px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	background: #444;
	color: #fff;
}
aside p {
	padding: 5px;
}
footer {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background: #ccc;
}
/*------------------------------------------------------------------*/
@media only screen and (min-width: 769px) {
html {
	width: 100%;
	overflow-y: scroll;
	overflow-x: auto;
}
#wrapper {
	width: 960px;
	overflow: hidden;
	margin: 0 auto;
}
#_btn,
#_btn2 {
	display: none;
}
header {
	height: auto;
}
header h1 {
	margin-top: 0;
}
nav {
	display: block;
	position: static;
	float: left;
	width: 150px;
	height: auto;
}
nav ul {
	margin: 10px 0 10px 0;
}
article {
	width: 660px;
	margin: 0 auto;
	position: static;
	overflow: hidden;
	float: left;
}
article section {
	width: 660px;
	background: #d49fc2;
}
aside {
	float: left;
	position: static;
	width: 150px;
}
footer {
	position: static;
	width: 960px;
}
/* ** */}
JavaScript

$(function() {
	var ww = window.innerWidth ? window.innerWidth: $(window).width();
	if (ww > 768){
		$("nav").css({"display": "block","width": "150px","height": "auto"});
	}
	$(document).on('click', '#nav_open', function(){
		$("nav").stop(true, true).css({"display": "block","top": "10px","right": "20px"}).animate({width: "90%",height: "260px",top:"10px",right: "20px"});
	});
	$(document).on('click', '#nav_close,#_btns', function(){
	var ww = window.innerWidth ? window.innerWidth: $(window).width();
	if (ww > 768){
	} else if(ww < 769) {
		$("nav").stop(true, true).animate({width: "0",height: "0"});
	}
	});
	$(window).resize(function(){
	var ww = window.innerWidth ? window.innerWidth: $(window).width();
	if (ww > 768){
		$("nav").css({"width": "150px","height": "auto"});
	} else if(ww < 769) {
		$("nav").css({"width": "0","height": "0"});
	}
	});
});

 サンプルはボタンの位置は右側にありますが、左側に変更することもできます。その場合、CSSとJavaScriptを下記の通り変更します。

サンプルデモ

 サンプルデモはこちら!


CSS

/* 0 to 768px */
#_btn2 {
	overflow: hidden;
	position: absolute;
	top: 0;
	rightleft: 0;
	left: 0;
	z-index: 3;
}
#nav_open {
	position: absolute;
	z-index: 1;
	top: 0;
	rightleft: 20px;
	left: 20px;
	width: 46px;
	height: 46px;
	cursor: pointer;
}
#nav_close {
	cursor: pointer;
	position: relative;
	rightleft: 0;
	left: 0;
}
JavaScript

$(function() {
	var ww = window.innerWidth ? window.innerWidth: $(window).width();
	if (ww > 768){
		$("nav").css({"display": "block","width": "150px","height": "auto"});
	}
	$(document).on('click', '#nav_open', function(){
		$("nav").stop(true, true).css({"display": "block","top": "10px","rightleft": "20px"}).animate({width: "90%",height: "260px",top:"10px",rightleft: "20px"});
	});
	$(document).on('click', '#nav_close,#_btns', function(){
	var ww = window.innerWidth ? window.innerWidth: $(window).width();
	if (ww > 768){
	} else if(ww < 769) {
		$("nav").stop(true, true).animate({width: "0",height: "0"});
	}
	});
	$(window).resize(function(){
	var ww = window.innerWidth ? window.innerWidth: $(window).width();
	if (ww > 768){
		$("nav").css({"width": "150px","height": "auto"});
	} else if(ww < 769) {
		$("nav").css({"width": "0","height": "0"});
	}
	});
});

関連リンク

 コンテンツがスライドするドロワーナビ

 コンテンツがスライドするドロワーナビ(レスポンシブ)

 サイドバーがスライドするドロワーナビ(レスポンシブ)

 コンテンツとサイドバーが一緒にスライドするドロワーナビ(レスポンシブ)

  • カテゴリー:Labs
  • facebook10
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0