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万円追加してくれるなら、対応コードを作ります。

 

要点とコード

code

HTML

 

SCSS

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

 

jQuery

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

 

ハマった箇所

bug

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

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

 

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

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

 

カスタマイズ

customize

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

 

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

コメントを投稿する

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