ドロワーメニューをスマホサイトに導入することに。
色々見た上でこれを選んだ。
選んだ理由
こういう横から生えてくる系のメニューをつけてるサイトって、
ヘッダーが画面上部に固定表示されてるパターンが多い気がする。
サイト名をアピールしたり、常にメニューを開ける状態にしてるから便利でしょみたいなことなんだとは思う。
でもぶっちゃけ、スマホみたいなサイズで固定表示なんかされると邪魔くさくて仕方がない。
ページトップとかブラウザの標準機能に付いてんじゃん。
そんなちょくちょくページ移動しないでしょうよ。
画面を広く使えるほうがいいんじゃないの。
使い分けなんだとは思うけどね。
で、ドロワーメニューの中にはそれ自体の機能としてトリガーになるボタンが常時表示されるタイプがあったりして。
それ以外はいい感じだったのにね、残念。
ということで、ただキーになるリンク（ボタン）をクリックしたら表示してくれる、
シンプルな挙動により選んだ。
導入+閉じるボタンの作成
公式サイトからDLできる。
Sidr – A jQuery plugin for creating side menus
普通に導入する文には全然難しくないので割愛。
それよりも、使い勝手を向上させるための一手間。
サンプルではトリガーになるリンクをidで拾う設定だけど、
これをclassに変更する。
$(document).ready(function() {
$('.sidr_btn').sidr();
});原則として同一idは1ページにつき1個、重複しちゃいけない。
これのおかげでページ内リンクが使えるわけですね。
なので、いくつ設置してもいいようにclassにした。
回りくどかった。
要は、sidrで出したコンテンツ内に閉じるボタンを設置する。
<div id="sidr">
<ul>
<li><a>あああああ</a></li>
<li><a>あああああ</a></li>
<li><a>あああああ</a></li>
<li><a class="sidr_btn" href="#sidr">メニューを閉じる</a></li>
</ul>
</div>上のjsと絡めたらこんな感じ。
とても簡単。
ページ内スクロールとの共存
ページ内スクロールのjsが入ってると、sidrの表示・非表示の挙動が妙なことになる。
sidrのトリガーになるリンクを拾っちゃってるのが原因なので、
ページ内スクロールの記述からトリガー分は削ってあげてください。
手法についてはこっち↓
[jQuery]特定のリンクを除外しつつページ内スクロール
そんなかんじ。
コメント