今回はアコーディオンメニューについてまとめます。 スマホサイトが増えてからよく見られる様になりましたアコーディオンメニューですが、実装は主にの2通りあります。 【1:cssのみでの実装】 【2:jsも使用した実装】 まずはコードを比べてみましょう。 See the Pen アコーディオンメニュー(JS使用) by Kaorin (@PANbooooo) on CodePen. See the Pen AccordionMenu(CSSのみ) by Kaorin (@PANbooooo) on CodePen. 上がJSを利用したもので、下がcssを利用したものです。 各々の機能を知る為に、装飾をしているcssを消してみたいと思います。 See the Pen アコーディオンメニュー(JS使用)(装飾なし) by Kaorin (@PANbooooo) on CodePen. See the
![JSを使ったアコーディオンメニューと、cssのみで実装したアコーディオンメニューの実装方法をまとめてみた - うぇぶごと](https://cdn-ak-scissors.b.st-hatena.com/image/square/db38700fc76a6bc510f30bdd4a1333108423cac2/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fs%2Fs2lybb%2F20170416%2F20170416133632.jpg)