jQuery・実務で必要な12項目をクリアしたレスポンシブドロワーメニューを作りました [IE11以上]

1

2017/09/24 縦スライドバージョンを作っておきました。CSS修正のみ。

2017/07/29 余計なCSSを削除し、jQueryの見直しを行いました。

2017/01/29 Mac OS・Safari限定でスクロール不可に。Mac版Safariはクソブラウザ化しているので放置。
※iOS、Androidは問題なし。

2015/10/16 発火後にリンクへ飛んでしまうバグを修正

2015年9月時点における、ドロワーメニューの実務要件を考えた。

  1. Android 4.1 で動作する
  2. PCのクリック / スマホのタップ、両方に対応
  3. スマホアプリのように滑らかにスライド
  4. スマホでタップすると、一瞬で開閉する
  5. オーバーレイをクリックで戻る
  6. 閉じるボタンも設置
  7. トリガーボタンを複数設置可
  8. オープン時、ドロワーメニュー部分のみスクロール ※コンテンツ側のスクロール無効
  9. ドロワーメニューの横幅をCSSで変更可 ※レスポンシブ
  10. viewport に余計なコードを追加しない
  11. 意味不明なHTML/CSSコードを追加しない
  12. jQuery 1.7.0~最新verまで対応

上記を満たした無料プラグインは、世界中のネットを探しても見当たらず。
それなら私が作ろうと。

IE10は対応しないの!?
1案件につき10万円追加してくれるなら、対応コードを作ります。

 

要点とコード

HTML

 

SCSS

  • ドロワーメニュー・オーバーレイ共に position fixed で固定配置
  • メニューは横幅マイナス値を left に指定し、左外側へ配置
  • オーバーレイはwidth 100%、right -100% で右外側へ配置
  • メニュー横幅は固定ピクセル・相対パーセントどちらでもOK
    ※レスポンシブでも固定ピクセルがベター
  • transform translate3d() でアプリ並みの滑らかさを実現
  • スライド速度やイージングは transition で調整

 

jQuery

完成コードはシンプルだが、制作過程は試行錯誤の連続…。

 

ハマった箇所

Chromeでメニューのスクロールがフリーズ

translateX() を translate3d() に変更したら直った。
なぜ3dにする必要があるのかは不明。

Android 5でオーバーレイをタップできない

画面外側へ配置せず、transitionで透明度を0 -> 1に変化させるのみだと、なぜかタップできなくなる。
従って、右外側へ配置したスライド式に変更。

 

カスタマイズ

メニューを右からスライドさせたい
left を right に修正し右側へ配置、translate3d() でマイナスを指定。
メニュー横幅を固定ピクセルでなく相対パーセントにしたい
CSSを修正すればOK。

 

JavaScript逆引きハンドブック
古籏 一浩
シーアンドアール研究所
売り上げランキング: 337,626
4コメント
すーじー

こんにちは。こちらのドロワーメニューはシンプルで使い勝手がとても良く、大変ありがたく利用させていただいております。
ページ内リンクやリンク先ページのアンカー項目に飛ばしたい場面があるのですが、URLにアンカーがあると遷移しないようです。
アンカーには対応できないでしょうか。
可能であれば、ご教示いただきたく、何卒お願い申し上げます。

返信
Keita Hirai

すーじーさん

こんばんは。当ブログ管理人の平井です。
自作ドロワーメニューを使って頂きとても嬉しいです。

明日検証してみますので、回答までもうしばらくお待ちください。

返信
Keita Hirai

平井です。
返信が遅れすみません。

ページ遷移してアンカーへ飛ばすのを試してみたところ、問題なく動作しました。
例えば下層ページ second.html の #block2 に飛ばしたいときは、
a href=”second.html#block2″
で動作します。

ページ内リンクのアンカーへ飛ばすには、ページ固定とスクロール位置保持を解除すると可能です。
以下のように、22行目と36行目をコメントアウトで無効化してみてください。

// position: “fixed”,
// $(“html, body”).prop({scrollTop: scrollY});

ただこれを実行すると、ドロワーメニューを開いた時にブラウザスクロールは固定されなくなります。
その点も含め一度試してみてください。

返信
すーじー

無事ページ内リンクへ飛ばすことができました。
お手数をおかけし申し訳ありませんでした。
これでさらに実務で使い勝手が良くなり嬉しいです。
素早いご対応ありがとうございました!

返信

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。