【コピペ】CSSだけで実装できるアコーディオンメニュー15選

近頃モバイルファーストが進んできて、PCサイトでもスマホのようなハンバーガーメニューを採用するサイトが増えてきました。
Jsでリッチな動きを表現するのももちろん良いですが、特にこだわりがない、もしくはシンプルな動きであればできればCSSで実装したいところ。
その方が軽いですし、バッティングのリスクも減らせます。

そういうわけで今回はCSSのみで実装できるアコーディオンメニューを集めてきました。

1. CSS3 Multiple Accordion Menu

See the Pen CSS3 Multiple Accordion Menu by Graeme Attkins (@Frecosse) on CodePen.0

シンプルなアコーディオンメニュー。色がダークでかっこいいですね。
他のメニューを開いたときに、すでに開いているメニューが閉じないタイプのアコーディオンです。

2. Only CSS3 Dropdown Menu

See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.0

ちょっとした動きのアクセントがかわいいアコーディオンメニュー。開いた時にメニューが少し跳ねるのがかわいいですね。こちらも閉じないタイプ。

3. Funky Pure CSS Accordion

See the Pen Funky Pure CSS Accordion by Jamie Coulter (@jcoulterdesign) on CodePen.0

動きがめちゃくちゃかわいいアコーディオン。開くとアイコンと背景が出てきます。他のメニューを開いた時にイラストが動く様子もハイセンスですごく良いですね。

4. Awesome accordion menu using only HTML & CSS

See the Pen Awesome accordion menu using only HTML & CSS by Ahmad Emran (@ahmadbassamemran) on CodePen.0

アイコンはFontAwesomeが使われています。画像を使わなくていいのもありがたいところ。
ホバーした時の動きも良いですね。こちらは一つを開くと、他のメニューが閉じます。

5. CSS + HTML only Accordion Element

See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.0

スムーズな動きが気持ち良いアコーディオン。メニューを開くと下から文字がスッと出てきます。あと開いた時の矢印の切り替わりもぬるっとしていて気持ち良い。
こちらは他メニューを開いても閉じないタイプのアコーディオンメニューです。

6. Pure CSS Accordion

See the Pen Pure CSS Accordion by Rau (@raubaca) on CodePen.0

他のメニューを開くと閉じるタイプと、閉じないタイプの２パターンのアコーディオンメニューです。二つから選べるのはありがたい。
閉じるボタンがついてるのもポイントですね。

7. CSS Accordion

See the Pen CSS Accordion by Theodore Kluge (@villa7) on CodePen.0

メニューを選択するとふわっと浮き上がるタイプ。あまりみない動きなので、個性を出したい時に良いかもしれません。

8. Hover activated accordian with default state

See the Pen Hover activated accordian with default state by Cory (@uniqname) on CodePen.0

ホバーだけで切り替わるアコーディオンメニュー。

9.　CSS Only Accordion

See the Pen CSS Only Accordion by Grant Vinson (@vinsongrant) on CodePen.0

シンプルなアコーディオンメニュー。メニューを開くとシャドウで浮き上がる感じが良いですね。

10. CSS3 Accordion

See the Pen CSS3 Accordion by Larry Geams Parangan (@larrygeams) on CodePen.0

横に開くタイプのアコーディオンメニュー。サンプルではSNSアイコンで使ってますね。

番外編 リッチなメニューを作成するのに使えるスニペット

CodePenでCSSだけのアコーディオンを探していたら、使えそうなCSSのみのメニューをいくつか見つけたので、番外編として紹介していきたいと思います！

Gooey Menu

See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.0

水のような動きがかわいいメニュー。PCで使った方がいいのかな？
リッチな動きがとてもかわいいです。

CSS Gooey Menu (Version 2)

See the Pen CSS Gooey Menu (Version 2) by Lucas Bebber (@lbebber) on CodePen.0

同シリーズ別バージョンのメニュー。こちらもリッチで可愛い動きをします。

CSS Gooey Menu (Version 3)

See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.0

同シリーズ別バージョンのメニュー。横に展開するタイプですね。

CSS Gooey Menu (Version 4)

See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.0

同シリーズ別バージョンのメニュー。横に展開するタイプで繋がってるタイプ。

CSS-only Weather App Concept

See the Pen CSS-only Weather App Concept by David Khourshid (@davidkpiano) on CodePen.0

たぶんアプリを想定して作られたもの。
ホバーすると天気のアイコンが移動するんですが、その動きが非常にぬるっとしていてかつシンプルで良いです。

Pure CSS3 Mega Dropdown Menu With Animation (Vertical)

See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.0

CSSだけで実装されたサイドのメガメニューです。アイコンはFontAwesomeですね。
ホバーした時の動きも気持ちよくて良い感じです。

Sidebar Menu Hover Show/Hide CSS

See the Pen Sidebar Menu Hover Show/Hide CSS by JFarrow (@JFarrow) on CodePen.0

こちらもサイドバーのメニューです。アイコンのみのタイプで、アイコンにホバーするとメニューが開きます。メニューの項目が多い場合などに見かけるタイプ

Pure CSS Hamburger fold-out menu

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.0

最近PCでもよく見かけるハンバーガーメニュー。メニューを押すとと左からメニューが登場します。ハンバーガーと閉じるボタンの切り替わりも良い感じですね。

Responsive Accordion (Background Images)

See the Pen Responsive Accordion (Background Images) by Michael Ferry (@ferry) on CodePen.0

PCで使えそうな画像のアコーディオン。サービスや商品をメインで一覧にしたい時に良いですね。
動きもぬるっとして気持ちが良いです。

One Page Navigation CSS Menu

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.0

こちらもPCで使えそうなメニュー。アイコンをクリックすると右側のコンテンツエリアが切り替わります。

Pure CSS One page vertical navigation

See the Pen Pure CSS One page vertical navigation by Alberto Hartzet (@hrtzt) on CodePen.0

左のボタンをクリックすると右側のコンテンツエリアが切替ります。