CSS3でアコーディオンメニュー

  • 2021.01.13
  • CSS
CSS3でアコーディオンメニュー

CSS3のみで、JavaScriptに依存せずにスムーズに動くアコーディオンメニューを実装する簡単なサンプルコードを記述してます。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

アコーディオンメニュー

アコーディオンメニューは親要素をhoverしたときに子要素が display: table;で開くシンプルな形です。その際transitionプロパティを使用することで動きをスムーズにしています。

サンプルコード

以下は実際に、アコーディオンメニューを実装したサンプルコードとなります。

ブラウザ上で表示した結果