CSSのみで開閉メニュー(アニメーション)を作成する例|簡単にアコーディオンメニュー

今回は、CSSのみでアニメーションをする開閉メニュー(アコーディオンメニュー)を作成する簡単な例となります。

CSSのみでアニメーションの開閉メニューを作成する例

以下、アニメーションをする開閉メニューを作成する例となります。

See the Pen eYOazRR by yic666kr (@yic666kr) on CodePen.

上記のアコーディオンメニューでは、メニューを開閉するボタンをinput要素のcheckboxで作成します。

そして、CSSでinput要素のcheckboxがチェックされていない場合には、メニュー項目の高さを出さないようにし、チェックされている場合には、checkboxの擬似クラスを利用して高さを出すようにしています。

そのことにより、CSSのみで開閉するメニューを作成しています。

また、メニュー開閉のアニメーションにはtransition プロパティを利用しています。

jQueryで開閉メニューを作成する場合

jQueryでアニメーションをする開閉メニューを作成する方法については、以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。