メニュー以外の箇所をタップするとメニューが自動で戻るナビゲーション

UIを意識したくて作ったやつ。
メニューをスライドさせる動きとclassを付けるのをjQueryで行っています。

ハンバーガーメニューは以前作ったこちらを使いました。
CSSだけで作るハンバーガーメニュー

縦にメニューが出てくるナビゲーションですが、メニュー以外をタップした時に自動でナビが戻ります。

See the Pen 1709101 by M.Ueda (@nekuta) on CodePen.

.navをタップした時、.header_sp_navと.main_coverにactiveというクラスをつけます。
main_coverは予めposition:fixed;で固定し、大きさをブラウザ全体にしておいて、z-index:-1を掛け、重ね順を下にしておきます。activeが付いた時にz-indexの値を大きくして、重ね順を上に持ってきます。

js(iQuery)

.hasClass(‘クラス名’)でその要素に指定のクラス名があるかどうか判断できます。そのクラスがある場合はtrue、ない場合はfalseを返します。クラス名は変数でも取得可能。