レスポンシブWebを導入する（アコーディオンメニュー）[JavaScript編]
カテゴリー：Web
前回はCSSの対応方法について記事を書きました。
今回はJavaScriptの記事ですが、最低限の対応であれば必要無い気がします。
ではどんなときに必要になるのか！？
例えば、
「スマホだとグローバルメニューをアコーディオン形式で表示するようにしたい」
「ウィンドウを狭めるとテキストサイズもその分小さくなるようにしたい」
といったことを実現するにはきっとJavaScriptが必要になってきます。
今回は前者のアコーディオン形式で表示するやり方、試してみたいと思います。
ちなみにjQueryを使います。
デモサイトを作ったので、これを基に説明します。
ブラウザのサイズをぐりぐり動かすとアコーディオンメニューに切り替わったりします。
※適宜デモサイトのソースを見ていただければと思います。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>begointo レスポンシブWeb動作テスト</title>
<link rel="stylesheet" type="text/css" media="all" href="wp-content/themes/be/assets/css/reest.css" />
<link rel="stylesheet" type="text/css" media="all" href="wp-content/themes/be/assets/css/demo_1.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="wp-content/themes/be/assets/css/demo_1_pc.css" />
<link rel="stylesheet" media="screen and (max-width: 480px)" href="wp-content/themes/be/assets/css/demo_1_mobile.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<script>
$(window).resize(function() {
var $g = $('#gnavi');
// mobile
if ($(window).width() <= 480) {
// メニュー非表示
$g.hide();
// pc
} else {
// メニュー表示
$g.show();
}
});
$(function(){
var $g = $('#gnavi');
var $btn = $('#toggle-button');
// #toggle-buttonをクリックすると
$btn.on('click', function() {
// メニュー開閉アニメーションをしていないときは
// #gnaviを開閉させる
$g.not(':animated').slideToggle(400, function() {
// 「開く」「閉じる」のテキスト入れ替え用にclass付与
$btn.toggleClass('act');
});
});
});
</script>
<div id="wrapper">
<header id="header">
<h1>レスポンシブWeb 動作テスト</h1>
<p id="toggle-button"></p>
<nav id="gnavi" role="navigation">
<ul>
<li>メニューその1</li>
<li>メニューその2</li>
<li>メニューその3</li>
<li>メニューその4</li>
</ul>
</nav>
</header>
<div id="main">
<div id="content">
<section>
<h2>メインコンテンツ</h2>
<p>メインメイン</p>
</section>
</div>
</div>
<div id="sub">
<section>
<h2>サイドバー</h2>
<p>サブサブ</p>
</section>
</div>
</div>
CSS（メディアクエリ）の作成
まずはJavaScriptの前に、CSSでレスポンシブWeb対応のコーディングをします。
headタグ内でウィンドウサイズごとにCSSの切り替えを行います。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>begointo レスポンシブWeb動作テスト</title> <link rel="stylesheet" type="text/css" media="all" href="wp-content/themes/be/assets/css/reest.css" /> <link rel="stylesheet" type="text/css" media="all" href="wp-content/themes/be/assets/css/demo_1.css" /> <link rel="stylesheet" media="screen and (min-width: 480px)" href="wp-content/themes/be/assets/css/demo_1_pc.css" /> <link rel="stylesheet" media="screen and (max-width: 480px)" href="wp-content/themes/be/assets/css/demo_1_mobile.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> </head>
ウィンドウサイズが480px以上なら「demo_1_pc.css」
480px未満なら「demo_1_mobile.css」を読み込んで表示調整をしています。
細かいCSSの内容は前回説明したので省きます。
JavaScriptでアコーディオンメニューの作成
最低限レスポンシブWebっぽくなったら、後はJavaScriptの記述です。
大きく分けて2つの処理が必要です。
ウィンドウサイズに変更があったときの処理
$(window).resize(function() {
var $g = $('#gnavi');
// mobile
if ($(window).width() <= 480) {
// メニュー非表示
$g.hide();
// pc
} else {
// メニュー表示
$g.show();
}
});
「$(window).resize(function() {」というのは、ウィンドウサイズの変更があった場合に処理をする記述です。
ウィンドウサイズの変更があり、スマホ用のサイズだったら（480px）、グローバルメニューを非表示にしています。
逆にPC用のサイズだったらグローバルメニューを表示する、という具合です。
アコーディオンメニューの処理
これに関してはレスポンシブWebというよりは、通常のJavaScriptの書き方と一緒です。
$(function(){
var $g = $('#gnavi');
var $btn = $('#toggle-button');
// #toggle-buttonをクリックすると
$btn.on('click', function() {
// メニュー開閉アニメーションをしていないときは
// #gnaviを開閉させる
$g.not(':animated').slideToggle(400, function() {
// 「開く」「閉じる」のテキスト入れ替え用にclass付与
$btn.toggleClass('act');
});
});
});
「#gnavi」はグローバルメニューのidが設定されています。「#toggle-button」はグローバルメニュー開閉用のボタンのidが設定されています。
あとがき
我ながらわかりにくい説明になってしまった。。
ここまで説明しといてアレですが、こういった動作を実現できるプラグインはたくさんあります。
ただ、シンプルな動作で良いのであればプラグインを使わずに自力で実装してみてはいかがでしょう！？あまりプラグインを多用すると重くなったりしますし。。
ちなみに当サイトはアコーディオンの代わりにモーダルウィンドウ（ボタンを押すとウィンドウが飛び出すやつ）にしています。ただ、スマホで見るとうまくスクロールできなくなるという致命的な欠陥があります。。
→結局スライド式に変更しました
