「3階層時のグローバルメニュー」のレスポンシブ化対応

script 「3階層時のグローバルメニュー」のレスポンシブ化対応
最終更新日: 2023年5月11日

「MovableType　3階層時のグローバルメニュー（以下Gメニュー）」をレスポンシブ化。
メニュー（カテゴリ）が多く、階層も３階層+個別で深いGメニューの扱いをどうするか。
基本的な形状はFacebookやYouTubeアプリの様なコンテンツがスライドでしてメニューが現れ、メニューをスクロール可能なものとした。
jQueryプラグインで良さそうなものがあったが、属性等を複雑に組んだMovableTypeのメニュー部分のコードと合わせるのが億劫だし、メニューの中身とレスポンシブの元となる機構部分を分けて考えられた方が今後他への転用などを考えれば有意義でもあったので。

<header id="global-header">
<div class="header-inner">
<nav>
<ul id="global-nav">
<li>
<a href="url">
リンクリンク
</a>
</li>
</ul>
</nav>
</div>
</header>
<div id="wrapper">
<div id="logo-box">
<span class="slide-button">≡</span>
<a href="/" class="logo-img">
<img src="image.jpg" alt="hoge" />
</a>
</div>
～contents css
body.menu-show {
position:fixed;
}

body.menu-hide {
position:static;
} script
$(window).bind("unload",function(){});
$(function (){
$(".slide-button").click(
function(){
$("#wrapper").removeClass("menu-hide");
$("#global-header").removeClass("menu-hide");
$("body").removeClass("menu-hide");
$("#wrapper").toggleClass("menu-show");
$("#global-header").toggleClass("menu-show");
$("body").toggleClass("menu-show");
}
);
});

$(function (){
$("ul#global-nav li a").click(
function(){
$("#wrapper").addClass("menu-hide");
$("#global-header").addClass("menu-hide");
$("body").addClass("menu-hide");
}
);
});

先ず、コーディング上Gメニューはwrapperの上に＝下に来るようにする。z-index指定でPC版はwrapperの上に、スマホとタブレットは下に。これはプリローディング中Gメニューは表示されて、wrapperはローディング中の表示としたサイト構成からくるもので、コーディング上の順番は逆でも差し支えないかと。

cssはスマホ/タブレットでの操作に関与する部分。
Gメニューのdisplay:noneは、読み込み中に下層にあるにもかかわらず現出しないようにしている。
transitionは移動する際の移動時間設定。
transform: translate(85%, 0);は移動距離、（ここでは）x軸方向へ85%。
.menu-showと.menu-hideはクラス付与にて変わる属性。menu-showはwrapperが右85%移動してGメニューが現出（display:blockに）。bodyの属性をoverflow:hiddenとしてスクロールした際に振れるのを防止。header id=”global-header”をfixedで固定、overflow属性でフレ止め、縦スクロール可とする。
scriptだが、基本toggleClassでwrapperの開閉処理を行う。これでＯＫかと思ったが、mobile safari（iOS7）で確認すると、ブラウザのバックボタン使用時開閉動作もキャッシュされてしまって使い辛いことが判明。
ググったところ

$(window).bind("unload",function(){});（jQueryの場合）

でキャッシュされなくなる筈だったが、されないので・・・・（後日再検証するが）
メニューをクリックした際にmenu-showの属性を消し、menu-hideの属性を付与することで暫定、解決するようにした。
メニューを開く→メニューをクリック→バックボタンの動作の中で、開閉動作が半端に現出する事があるので、そこは今後検証の必要があるが（menu-hideのtransition速度で調整とか・・・凝らなければ問題にはならないけど）YouTubeアプリ的なメニューをレスポンシブデザインの中で組んだ。