アコーディオンメニューをおしゃれにするCSSスニペット15選。ヌルっと動く。
フォームのデザインをかっこよくするアコーディオンメニューのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
入力項目が多くカテゴリー毎にコンパクトに開閉したい場合、アコーディオンメニューを実装することも多いと思います。本記事ではフォームの中でも「アコーディオンメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルで押しやすい見た目・動作のアコーディオンCSSデザイン例。
基本形のシンプルアコーディオン。Pure CSSで実装できる。
See the Pen
acordion by P (@Triphon)
on CodePen.
基本形のシンプルアコーディオンでJSを使わずCSSのみで実装しています。
タブ切り替えと同様、アコーディオンメニューもリッチな動きはJSで書かないといけないケースが多いですが、シンプルなものを抑えておくのは大切ですね。
シンプルなデザインも、開閉時に変化する矢印がスタイリッシュ。
See the Pen
Pure css3 animated chevron toggle up/down by Vladimir Gashenko (@gxash)
on CodePen.
こちらもデザインとしては非常にシンプルな実装のアコーディオンです。ただし、右端の矢印の部分がメニュー開閉に合わせて反転する動きになってます。
アコーディオンの開閉状態が分かりやすく、機能性と美しさを兼ねそろえたデザインサンプルですね。
ネイビーカラーでスムーズに動くアコーディオン。
See the Pen
Open/Close Acordion by Mike St (@elmouse19)
on CodePen.
こちらはちょっと独特なカラーのアコーディオンですがスムーズに動きます。
それぞれが独立して動くアコーディオン。
See the Pen
Simple acordion by Ms.ambari (@ranginang67)
on CodePen.
アコーディオンは１つを開くと他が閉じるものと、独立して動くものがあります。こちらは全ての開閉が独立して動くタイプになります。
アイコンで入力内容のカテゴライズがわかりやすいですし、入力フォームのデザインなどを考える上で非常に参考になりますね。
シンプルなデザインも開閉動作がシュッとしているアコーディオン。
See the Pen
jQuery Acordion by Andrew (@andrew_mykhalchuk)
on CodePen.
アコーディオンはヌルっと動くサンプルが多いですが、こちらはシュッとした感じで動きます。JSで「.slideUp('fast’)」となっているためでしょう。これはこれでコンパクト＆クールなイメージで良いですね。
枠線が無いタイプのアコーディオン。
See the Pen
dWexdW by Sergi Oca (@SergiOca)
on CodePen.
枠線を少なくしたアコーディオンで下線と矢印マークしかありません。
少し開閉状態が分かりにくいところがありますが、デザインとして美しいです。サイトカラーやイメージに合うなら、こういうのも良いかもですね。
開閉動作は一切なし。横のマークだけがクルクル回る。JS不要。
See the Pen
collapsible css – checkbox by Tamara Acevedo (@tacevedo)
on CodePen.
アコーディオンが開閉するときに動作が全くなく、一気に全部開閉するタイプのアコーディオンです。横の「＋」マークだけがクルクルと回ります。JSを使わずPure CSSで出来ているのが良いですね。
項目選択タイプのアコーディオンメニューの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スニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
