【JavaScript&CSS3】スマホ用のハンバーガーナビを作ってみた

Pocket
LINEで送る

仕事の都合で必要になったので、スマホでよく見るハンバーガーメニューをLIGさんの記事を参考にして作りました。

要件としては、後々の汎用性も加味してjQueryは利用しない。JavaScriptで記述する。
bootstrapは入れる(navにはほとんど関係のない項目でしたが。。。)の2点のみ。

完成品

See the Pen 【JavaScript&CSS3】ハンバーガーナビ by nkmrkisk (@rekid) on CodePen.

留意点

スマホのナビゲーションのtoggle挙動のjs発火には、「click」ではなく、「touchstart」を使用

スマホは、画面のタップに対してそれが「スライド動作のためのタッチなのか。」「タップのためのタッチなのか」の判断のため、ラグが存在する。

  • 指で画面に触れたら即実行 => touchstart
  • 画面から指が離れたら即実行 => touchend
  • スクロールでは無くタップだと判断後に実行 => click

なので、clickは挙動が遅い。

メリット

タッチ後の挙動が爆速化(もっさり度ほぼ0)

デメリット

スクロールする為に画面に触れても反応する。
(画面右上のナビボタンにのみ適用させるので、スクロール時に誤ってタップは起こりにくいと判断して切り捨て)

SNSでもご購読できます。