レスポンシブサイトでメニュー等のナビゲーションを扱う際、
PC向けレイアウト時にはボタンをページ上に並べ、
スマートフォン向けレイアウト時にはボタン一式を折りたたんで
ハンバーガーボタンでメニューを開閉させるUIにすることで
スマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。
そんなレスポンシブ対応のナビゲーションメニューUIを
jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。
jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法
「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」サンプルを別枠で表示
サンプルではウィンドウサイズが768px以上ならばPC向けナビゲーション、
768px以下だったらスマートフォン向けのナビゲーションに切り替わります。
PC向けナビゲーションではボタン類は画面内に横並びですべて表示されます。
スマートフォン向けナビゲーションではページ上部に
ハンバーガーボタンを配置しクリックすることで
アコーディオン動作によってメニューボタンが開閉します。
全体構成についてまずはHTMLから。
◆HTML <nav id="menuList"> <ul> <li><a href="#">[１] MENU</a></li> <li><a href="#">[２] MENU</a></li> <li><a href="#">[３] MENU</a></li> <li><a href="#">[４] MENU</a></li> <li><a href="#">[５] MENU</a></li> </ul> </nav><!-- /#menuList -->
HTMLではナビゲーションで使用するリンクボタンをリストで構成し、
リスト全体を任意のIDもしくはクラスで囲います。
PC向けもスマートフォン向けも
この一つのソースを使用します。
この要素に対してCSSは以下のように指定します。
◆CSS
/* ------------------------------
#menuList
------------------------------ */
#menuList {
width: 100%;
height: 45px;
border-top: #aaa 1px solid;
border-bottom: #aaa 1px solid;
position: relative;
z-index: 10;
background: #ebebeb;
}
#menuList ul {
margin: 0 auto;
width: 800px;
height: 45px;
text-align: left;
}
#menuList ul li {
width: 160px;
height: 45px;
float: left;
border-left: #aaa 1px solid;
box-sizing: border-box;
}
#menuList ul li:last-child {
border-right: #aaa 1px solid;
}
#menuList ul li a {
height: 45px;
font-weight: bold;
line-height: 45px;
display: block;
text-align: center;
transition: all 0.2s linear;
}
#menuList ul li:hover > a {
background: #fff;
}
#contents {
margin: 0 auto;
padding: 40px 0;
width: 800px;
text-align: left;
}
#contents p {
padding-bottom: 2em;
font-size: 1em;
line-height: 2em;
}
/* ------------------------------
MEDIAQUERIES LAYOUT
------------------------------ */
@media only screen and (max-width: 800px) {
#menuList ul {
width: 100%;
}
#menuList ul li {
width: 20%;
}
}
/* ------------------------------
MEDIAQUERIES[SP]LAYOUT
------------------------------ */
@media only screen and (max-width: 768px) {
#menuList {
display: none;
}
#rwdMenuWrap {
width: 100%;
border-bottom: #aaa 1px solid;
}
#rwdMenuWrap #switchBtnArea {
width: 100%;
height: 60px;
background: #3c3c3c;
position: relative;
}
#rwdMenuWrap #switchBtnArea #switchBtn {
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: block;
background: #a7a7a7;
position: absolute;
border-radius: 5px;
}
#rwdMenuWrap #switchBtnArea #switchBtn span {
left: 20%;
width: 60%;
height: 4px;
display: block;
position: absolute;
background-color: #fff;
border-radius: 5px;
transition: all 0.2s linear;
}
#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(1) {
top: 10px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(2) {
top: 18px;
-webkit-transform: scale(1);
transform: scale(1);
}
#rwdMenuWrap #switchBtnArea #switchBtn span:nth-of-type(3) {
bottom: 10px;
-webkit-transform: rotate(0);
transform: rotate(0);
}
#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {
top: 18px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {
-webkit-transform: scale(0);
transform: scale(0);
}
#rwdMenuWrap #switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {
bottom: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#rwdMenuWrap ul {
width: 100%;
display: none;
}
#rwdMenuWrap ul li {
width: 100%;
border-bottom: #aaa 1px solid;
}
#rwdMenuWrap ul li a {
padding: 15px 20px;
text-align: left;
display: block;
background: #ebebeb;
position: relative;
}
#rwdMenuWrap ul li a:after {
content: '';
margin-top: -4px;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
color: #888;
font-size: 1em;
font-weight: bold;
line-height: 1.2em;
display: block;
position: absolute;
border-top: 2px solid #b0b0b0;
border-right: 2px solid #b0b0b0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#contents {
width: 100%;
}
#contents p {
padding: 0 20px 2em 20px;
}
}
/* ------------------------------
CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after {
content: " ";
display: table;
}
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}
768px以上のPC向けレイアウトでは
ボタンを横並びにするプロパティを指定します。
768px以下のスマートフォン向けレイアウトでは
PC向けレイアウト時に使用している要素は「display:none;」で非表示にします。
スクリプト側でメニューボタンのソースを
「#switchBtnArea」にコピーして制御するので
CSSではナビゲーションメニュー類を縦に並べて
アコーディオン形式のレイアウトにて指定するのに加えて
ハンバーガーメニューボタンの装飾・アニメーションを指定します。
そして実際の切り替えスクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
var rwdMenu = $('#menuList'),
switchPoint = 768,
slideSpeed = 500;
var menuSouce = rwdMenu.html();
$(window).load(function(){
function menuSet(){
if(window.innerWidth <= switchPoint){
if(!($('#rwdMenuWrap').length)){
$('body').prepend('<div id="rwdMenuWrap"><div id="switchBtnArea"><a href="javascript:void(0);" id="switchBtn"><span></span><span></span><span></span></a></div></div>');
$('#rwdMenuWrap').append(menuSouce);
var menuList = $('#rwdMenuWrap > ul');
$('#switchBtn').on('click', function(){
menuList.slideToggle(slideSpeed);
$(this).toggleClass('btnClose');
});
}
} else {
$('#rwdMenuWrap').remove();
}
}
$(window).on('resize', function(){
menuSet();
});
menuSet();
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| rwdMenu = $(‘#menuList’) | 切り替えUI全体を囲う要素（CSSクラスでも可） |
|---|---|
| switchPoint = 768 | PC向けとスマートフォン向けで切り替えるサイズ |
| slideSpeed = 500 | メニュー開閉時のアコーディオン動作スライドアニメーション時間 |
これらの設定値を変更することで微調整が可能になっています。
「switchPoint」で設定する値は、CSSで設定したメディアクエリと同じ値にします。
ページロード時およびウィンドウリサイズ時に
ウィンドウサイズを取得します。
「switchPoint」で設定された値（サンプルでは768px）よりも大きい
PC向けレイアウトの場合はスクリプト側では特になにもしません。
「switchPoint」で設定された値よりも小さければ
スマートフォン向けメニュー用のソースを生成し
ハンバーガーボタンの生成とボタンクリック時の開閉動作を指定します。
HTML上で記載しているメニュー用ソースを
スマートフォン向けに生成されるソースの中にコピーしています。
スマートフォン向けメニューソースは
「switchPoint」で設定された値よりも大きい場合は
要素自体を削除します。（生成させません）
以上がアコーディオンタイプのレスポンシブ対応メニューUIを
jQueryでシンプルに実装する紹介でした。
レスポンシブWebサイトでナビゲーションメニューを
コンパクトに扱う場合になどに活用できるUIかと思っています。
PC向けとスマートフォン向けでナビゲーションメニューUIを
アコーディオンタイプで切り替える際にぜひ。。。