仕事の都合で必要になったので、スマホでよく見るハンバーガーメニューをLIGさんの記事を参考にして作りました。
要件としては、後々の汎用性も加味してjQueryは利用しない。JavaScriptで記述する。
bootstrapは入れる（navにはほとんど関係のない項目でしたが。。。）の２点のみ。
この記事の目次
完成品
See the Pen 【JavaScript&CSS3】ハンバーガーナビ by nkmrkisk (@rekid) on CodePen.
留意点
スマホのナビゲーションのtoggle挙動のjs発火には、「click」ではなく、「touchstart」を使用
スマホは、画面のタップに対してそれが「スライド動作のためのタッチなのか。」「タップのためのタッチなのか」の判断のため、ラグが存在する。
- 指で画面に触れたら即実行 => touchstart
- 画面から指が離れたら即実行 => touchend
- スクロールでは無くタップだと判断後に実行 => click
なので、clickは挙動が遅い。
メリット
タッチ後の挙動が爆速化（もっさり度ほぼ0）
デメリット
スクロールする為に画面に触れても反応する。
（画面右上のナビボタンにのみ適用させるので、スクロール時に誤ってタップは起こりにくいと判断して切り捨て）