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

スマホ用です。
左からメニューが出てくるタイプのもの。
jQueryのtoggleClassでclassを振るシンプルなものです。
メニューボタンをタップしてメニューを出していますが、本当はメニュー以外をタップした場合もメニューを閉じさせる仕様にしたかった。
jsもっと勉強しないとな、と思います。

スマホ横から出るメニュー(改)
▲横ナビ以外の領域をクリックまたはタップしたときに横ナビを閉じるようにしました。

メニュー開閉の動作はすべてCSSで行っています。
transitionでぬるっと動かしたかったので、header_navにwidth:0pxを設定しています。
ここでdisplay:noneとかを設定するとtransitionは効かないので注意です。
ちなみにdisplay:noneでアニメーションをしたいならcssのanimationが効くのでそちらを使うと良いと思います。

HTML

CSS

js(jQuery)

デモページ

スマホ横から出るメニュー(改)
▲横ナビ以外の領域をクリックまたはタップしたときに横ナビを閉じるようにしました。