プログラミング

プログラミング

開閉がスマートでオシャレなCSSアコーディオンメニュー8つ

26,820 views

読了時間 : 約1分21秒

 

 

カンタンなJavaScriptで縦型HTMLとCSSアコーディオンメニューを作る方法を集めました。

 

1-060fbb7a58

 

おしゃれなピュアCSSドロップダウンメニュー▲
ピュアCSSのドロップダウンメニュー。JavaScriptを使わないユーザは知っておくべきインターフェース。
Jamie Coulter作
2016年4月12日

 

2-352c9384c8

 

シンプルイズベストなアコーディオンメニュー▲
HTML、CSS、JavaScriptのアコーディオンメニュー。
Julia Rietveld作
2016年6月8日

 

3-69e064c507

 

jQuery不使用アコーディオンドロップダウンメニュー▲
HTMLとCSSのアコーディオンメニューです。プラグインなしです。
Agustin Ortiz作
2014年11月18日

 

4-a7a5cfb842

 

サイドアコーディオンメニュー▲
HTML、CSS、jQueryのサイドバーアコーディオンメニュー。
Benjamin作
2014年4月18日

 

5-9b635d1550

 

縦型アコーディオンメニュー▲
スマートな縦型のアコーディオンメニュー。見出しにFont Awesomeのアイコンフォントを使用。デモにはCSS3でグラデーション・トランジション・影を導入。jQueryの使用は必要最低限。
thecodeplayer作

 

6-3ff1e3140b

 

CSS3だけで作ったドロップダウンメニュー▲
バイブレーションエフェクトのついたCSS3のドロップダウンメニュー。
Pedro Nauck作
2013年9月1日

 

7-893ae2972d

 

縦型フラットナビゲーション▲
アニメーションのドロップダウンメニュー付き。Font AwesomeやAnimate.cssも使用。
Andy Tran作
2014年11月18日

 

8-dae1124ed1

 

縦型フラットナビゲーション▲
シンプルで、ドロップダウンメニューが付いています。
Andy Tran作
2014年9月1日

 

本稿はCSS Accordion Menuを翻訳・再編集したものです。ダウンロード・デモ/コードも確認できます。

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ