CSSのみで開閉メニュー(アニメーション)を作成する例|簡単にアコーディオンメニュー
今回は、CSSのみでアニメーションをする開閉メニュー(アコーディオンメニュー)を作成する簡単な例となります。
CSSのみでアニメーションの開閉メニューを作成する例
以下、アニメーションをする開閉メニューを作成する例となります。
See the Pen eYOazRR by yic666kr (@yic666kr) on CodePen.
HTML・CSSの説明
以下、HTML・CSSのポイントとなる箇所の説明となります。
メニューを開閉するボタンについて
上記のアコーディオンメニューでは、メニューを開閉するボタンをinput要素のcheckboxで作成し、そのcheckboxのON-OFFを切り替えた際のCSSを変更することで、メニューの開閉を行っています。
また、メニュー開閉のアニメーションにはtransition プロパティを利用しています。
メニューが閉じている状態について
input要素のcheckboxがチェックされていない状態(デフォルトの状態)では、CSSでメニュー項目の高さを出さないようにして、メニューを閉じた状態にしています。
メニューが開いている状態について
input要素のcheckboxがチェックされると、CSSのcheckboxの擬似クラスを利用し、メニュー項目に高さを出して、メニューを開いた状態にしています。
jQueryで開閉メニューを作成する場合
jQueryでアニメーションをする開閉メニューを作成する方法については、以下のリンク先を参考にしてみてください。