スマホ用横から出るメニュー(改)

以前投稿した横から出るメニューの進化版みたいなものです。
スマホ用横から出るメニュー

横ナビ以外の領域をクリックまたはタップしたときに横ナビを閉じるようにしました。

デモページ

HTML

CSS

js(jQuery)

解説

以前と同じくjsはクリックしたときにclassを付けるようにしています。
class=”wrap”がスライドするのですが、その上に何でもよいので空のdiv(デモではon_wrap)を入れておき、z-indexを低く設定して重なり順を下にしておきます。これでon_wrapはクリックできません。
次にclass=”is_active”が付いた時にz-indexを高く設定し、重なり順を上にしてクリックできるようにします。
動きの部分はjsでcssをいじるかclassを付けるか毎回迷います。今回の場合はcssの差分書くの面倒くさかったので、jsですべて書けばよかったなあと思います。

デモページ

  • コーダーのための計算機