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

1

2017/01/29 Mac OS / Safari 限定でスクロールできなくなりました。面倒くさいので直してません。

2016/03/20
オーバーレイが横からスライドするバージョンを作っておきました。
全デバイス / OSでコード共通です。

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

 

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

  1. Android 4.1 で動作する
  2. PCのクリック / スマホのタップ、両方に対応
  3. スマホアプリのように滑らかなスライドする
  4. スマホでタップすると、一瞬で開閉する
  5. オーバーレイをクリックで戻る
  6. 閉じるボタンも設置
  7. トリガーボタンを複数設置できる
  8. オープン時、ドロワーメニューだけスクロールできる(コンテンツ側のスクロール無効)
  9. ドロワーメニューの横幅をCSSで変更できる(レスポンシブ)
  10. viewport に余計なコードを追加しない
  11. すぐには何かわからないHTMLやCSSコードを、可能な限り増やさない

これらを満たしたプラグインは、残念ながら見つかりません。確かに主要デバイス全てとレガシーIEに対応した、バグ無しのドロワープラグインを作ろうとすると、大変な労力が必要です。無料で存在しないのも当然でしょう。

というわけで、下記要件にて作りました。

  • 上記の11要件を満たす
  • 解決できない謎バグは、致命的エラーでない場合に許容する
  • IE 9 は、プログレッシブ・エンハンスメントで対応

IE 8 は対応しないの? 数ヵ月後にサポート終了です。

目次

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 8
  • Android 4.1 / 5

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • 冒頭に書いた11要件
  • jQueryバージョンは 1.7.0 以上で可
出来ないこと
  • IE 9 で開閉をスライドさせる(CSS3 transform が使えない)
  • Android でオーバーレイをフェードさせる(謎バグを解決できず)

 

要点とコード

code

HTML

余計なコードがないシンプルなもの。

 

SCSS

  • position: fixed; と left に横幅分のマイナス値を指定して、画面外側へ配置
  • transform: translate3d(); で、アプリのような滑らかさを実現
  • スライド速度やイージングは、transition で調整する
  • IE9 / 10 / Android 用のコードあり
  • ブレークポイントで横幅を自由に変えられる

Sass用のメディアクエリは、下記記事をご参考ください。

 

jQuery

  • 比較的シンプルなコード
  • レガシーIEとAndroid用のクラスは、ユーザーエージェントで切り替え

 

ハマった箇所

bug

Google Chrome でドロワーのスクロールがフリーズする

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

 

IE10 で translate3d() が2倍の数値になる

CSSハックだけでは直らないが、ユーザーエージェント切り替えを組み合わせたら直った。

 

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

opacity と z-index を組み合わせてオーバーレイをフェードさせているが、z-index: -1; などマイナス値を指定すると、重なり順が壊れるバグがあるらしい。

Windows / Mac / iOS / Android 4.1 では問題ないのに、なぜか Android 5 でオーバーレイがコンテンツより前に出てくれない。

いろいろ試したが上手く解決できないので、Android のみユーザーエージェント切り替えで show() / hide() を使ってフェード無しにした。

 

カスタマイズ

customize

右からスライド
left を right に修正し右側へ配置、translate3d() でマイナスを指定して左側へスライドさせる。
PCブラウザのスクロールを装飾したい
プラグインを使うか、Webkit 限定でCSSを追加すればOK。

 

問題点

Mac / iOS で一瞬チラつく
気になる場合はオーバーレイのフェードをやめて、show() / hide() にすればOK。

 

JavaScript逆引きハンドブック
古籏 一浩
シーアンドアール研究所
売り上げランキング: 337,626
    • このエントリーをはてなブックマークに追加