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

参考サイトなど

コメント投稿コメント投稿欄を開く

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

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