アコーディオンメニューをおしゃれにするCSSスニペット15選。ヌルっと動く。
フォームのデザインをかっこよくするアコーディオンメニューのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
入力項目が多くカテゴリー毎にコンパクトに開閉したい場合、アコーディオンメニューを実装することも多いと思います。本記事ではフォームの中でも「アコーディオンメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルで押しやすい見た目・動作のアコーディオンCSSデザイン例。
基本形のシンプルアコーディオン。Pure CSSで実装できる。
See the Pen
acordion by P (@Triphon)
on CodePen.
項目選択タイプのアコーディオンメニューのCSSデザイン例。
アコーディオンを開くと小項目がリストとして表示されるメニュータイプのアコーディオン。
See the Pen
acordion-menu by dru (@druArt)
on CodePen.
アコーディオンはエリアの表示/非表示を切り替えるものだけでなく、選択メニューの表示/非表示を切り替えるものもあります。本項では後者のタイプをまとめています。
このデザインサンプルなどは、1つのアコーディオンを選択すると、小項目の選択肢が表示されます。
アコーディオンの開閉で親項目のデザインが変化するスタイリッシュなアコーディオンメニュー。
See the Pen
Bumpy lists by Yair Even Or (@vsync)
on CodePen.
アコーディオンの開閉時、親項目アコーディオンのマークが「＋」「－」で切り替わるのがカッコイイですね。選択時に表示される小項目もホバー時の動作などが作り込まれていてスタイリッシュなデザインサンプルです。
アコーディオンメニューと通常メニューが混在しているメニューデザイン。
See the Pen
Semantic Menu Acordion by Alec Gonzalez (@Adrek)
on CodePen.
こちらは小項目がアコーディオンメニューで開くものと、親項目のみで開かないものとが混在しているデザインになります。こういうパターンもあるかと思いますので、非常に実用的ですね。
親項目と小項目のカラーが反転した色になるのもインパクトがあって印象的です。
アコーディオンメニューを含めたデザイン全体のインスピレーションを与えてくれるサンプル。
See the Pen
my profile by kevin parra (@kevinParra)
on CodePen.
こちらのデザインサンプルはアコーディオンメニューだけでなく、アコーディオンを含めた全体のサンプルになります。パーツとしてではなく、全体イメージのインスピレーションが湧いてくるのが良いですね。
珍しいデザインが目を引く。独特な見た目・動きが心に残る異端児アコーディオン。
目次型？。アコーディオンを開くとインデントを１つ落とした内容が表示される。
See the Pen
Simple jQuery Acordion by Rima Gerhard (@rimager)
on CodePen.
目次型のアコーディオンが3つ並んでいるようなデザインになってます。Simpleって書いてありますけど、結構独自な形のデザインかなと思います。
「＋」「－」で切り替わる動作が美しい。同じ項目を連続選択した際の動きも◎。
See the Pen
Accordion jQuery by Sergii (@Sergii5854)
on CodePen.
アコーディオンの開閉が「＋」「－」で切り替わる動作が美しいデザインサンプルです。さらに通常のアコーディオンは選択中の項目を再選択した際に何も起こらないことが多いですが、このサンプルは一度閉じようとした後に再度開くような動作をします。遊び心があって良いですね。
アコーディオン自体が開いたエリアと一体化。
See the Pen
lmHhC by Antonio Torres (@tretznor)
on CodePen.
アコーディオンを開くと、アコーディオンの背景色が開いたエリアと同じカラーに変化し、まるで一体化したように表示されるデザインサンプル。
ホバーで横にカッコよく広がるアコーディオン。SNSの紹介に。
See the Pen
Follow Me On Social Media by Daniel Maldonado (@danmax)
on CodePen.
ブログなどで自分のSNSを紹介するのに良さそうなアコーディオンですね～。
かっこいい～！！
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。