menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

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

1. サンプル

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

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

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

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


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

<div id="wrapper">
<div id="_btn">
<div id="nav_open"><img src="_btn.png" alt="menu"></div>
<!--_btn--></div>
<header>
<h1><a href="https://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 (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"});
}
});
});
Result

サンプルデモはこちら

2. サンプル

サンプル1のボタンの位置は右側にありますが左側に変更することもできます。その場合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"});
}
});
});
Result

サンプルデモはこちら


関連リンク

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

  • jQuery スマホ ナビ レスポンシブデザイン
このエントリーをはてなブックマークに追加