HTMLで動くアコーディオンメニュー 5選
誰でも簡単にアコーディオンメニューが作れる！
簡単にアコーディオンメニューを使ってみたいと思ったことはありませんか？
少し前まではJavaSprictで作るものが主流で、初心者には複雑でハードルが高い実装でした。
今回はHTML5.1から新しく追加されたdetailsを使った簡単なアコーディオンもいくつかご紹介します。
detailsをまだ使ったことのない方も驚くほど簡単で、ブラウザーの互換性も良いのでぜひ試してみてください。
すぐに作れる簡単なものばかりなので時間のないデザイナーの方にもぜひ使ってみて欲しいです。
初心者でも実装できるようにjsを一切使わずにHTMLとcssのみでアニメーションをつけてみました。
それでは一緒に実装してみましょう♪
よく読まれている記事
ラインのようなアコーディオン
横棒のラインで区切ったとてもシンプルなアコーディオンメニューです。
色も黒で統一して、ボタンを押した後のサブメニューは文字と背景の色を反転させて視認性を良くしています。
スタイリッシュで真面目なイメージのサイトに使いやすいデザインです。
See the Pen
アコーディオンメニュー by loa (@hana4525)
on CodePen.
シンプルなアコーディオン
これが一番よく見かけるシンプルなアコーディオンメニューです。
背景に濃い青色を敷いてボタン感を出して、ボタンを押した時に三角のトグルが回転するようになっています。
特にこだわらずにアコーディオンメニューを使ってみたい方におすすめの実装です。
See the Pen
アコーディオンメニュー by loa (@hana4525)
on CodePen.
角丸で可愛いアコーディオン
ボタンの角が丸くなっているアコーディオンメニューです。
一目でボタンとわかるデザインで、ボタンを押すと上からサブメニューが出てくるようになっています。
これだけでは少し寂しいので、サブメニューをホバーすると矢印が右に動くアニメーションもつけました。
存在感のあるメニューを作りたい方や、可愛い感じを出したい時に使えそうですね。
See the Pen
アコーディオンメニュー by loa (@hana4525)
on CodePen.
付箋のようなアコーディオン
付箋紙が動いているようなアコーディオンメニューです。
見た目は少し複雑に見えますが、ボタンの高さを指定することで簡単にアニメーションをつけることができます。
矢印型のトグルも線のサイズを変えることで、メインとサブをわかりやすく見せることができます。
配色を少しかえてみるだけでもさらに面白い実装も作れそうですね。
See the Pen
アコーディオンメニュー by loa (@hana4525)
on CodePen.
BOXのようなアコーディオン
枠線がおしゃれなBOXのようなアコーディオンメニューです。
シンプルなデザインに見えますが、ボタンを押すとプラスマークが回転しながらマイナスマークになるアニメーションをつけました。
またサブメニューが表示される時もふわっと表示されるようになっています。
デザインにこだわりたい方に一度は使ってみてほしい実装です。
See the Pen
アコーディオンメニュー by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回はHTML5.1で使えるようになった機能でアコーディオンをいくつか作ってみました。
私はこれまでlabelを使って実装していましたが、コードが長くごちゃごちゃしてわかりにくいなと感じていました。
このdetailsを使ったアコーディオンはすごくわかりやすくコードもスッキリしていてすごく実用的だと思いました。
ただ、cssでのアニメーションの適用が難しく、jsとの組み合わせでの実装も不可欠になりそうですね。
用途に合わせて使い分けはできそうなので、時間効率が良い方法を選んで使っていきましょう。
最後までご覧いただきありがとうございました☆彡