【Labs】レスポンシブデザイン スマホ用ナビ - web design lab
home > labs > 【Labs】レスポンシブデザイン スマホ用ナビ

9月更新・前月(8月)の人気記事トップ10 09/02/2024

  1. ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
  2. ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
  3. ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
  4. ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
  5. (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
  6. ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
  7. ( 09 ↑) 【Mac】Safariでソースコードを見る方法
  8. ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
  9. ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
  10. (圏外↑) 【GIMP】レイヤーをロック
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村
【Labs】コンテンツとサイドバーがスライドするレスポンシブデザイン ドロワーナビ 【LOCAL】Windows 10にアップデートしたらApacheが動かなくなった

【Labs】レスポンシブデザイン スマホ用ナビ


【Labs】レスポンシブデザイン スマホ用ナビ

こんにちは（・∀・）

今回はスマホ用のナビゲーションをご紹介します。

以前からご紹介してありますスマホサイトのメニューボタン(ハンバーガーボタン)をタップしてドロワーナビが展開するタイプとは異なり、ボタンをタップするとコンテンツの上にnav要素が展開してメニューを表示させるタイプのナビゲーションになります。

サンプル１はボタンが右側、サンプル２はボタンが左側になります。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="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 (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

サンプルデモはこちら

関連リンク

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

【Labs】コンテンツとサイドバーがスライドするレスポンシブデザイン ドロワーナビ 【LOCAL】Windows 10にアップデートしたらApacheが動かなくなった
subscribe
にほんブログ村 デザインブログ Webデザインへ PVアクセスランキング にほんブログ村