Web production note

 【更新日 :

【CSS , jQuery】クリックでメニューアイコンが可変するスマホのメニューボタンとトグルメニュー

Category:
css / js

クリックでメニューアイコンが可変するスマホのメニューボタンとトグルメニューのサンプルです。
メニューボタンは、ボタンにonというクラスが付くと形が☓ボタンに変わる仕様です。
装飾はcssで行い、クラスの付与とトグルメニューの開閉みをjsで行っています。

html

css

sass / compass

JavaScript

1ソースでPCとSP表示を切り替えている場合は、ブレークポイントで一度リセットするようにすると、
表示を切り替えた時にメニューが消える不具合等の対策になると思います。

参考リンク