no-image

JavaScript

jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

Accordion-menuは、jQueryとCSS3を使ったシンプルな縦型アコーディオンを実装できます。各項目をクリックすることで、それに対応したメニューが開閉されます。アニメーションも滑らかで、垂直タイプのアコーディオンなのでモバイルとの相性もよさそうですね。

Accordion-menu

Accordion-menu

デモでは、Vegetables、Fruits、Cars、Motors、Dressesと書かれたアコーディオンメニューが設置されています。各項目をクリックすると、その項目に関するメニューリストがスライドダウンで表示されます。再度クリックすると今度はスライドアップで非表示になります。

簡単な操作性で使いやすく、デザインもシンプルなのでとても見やすいアコーディオンメニューですね。また、アコーディオンが展開されている項目の横には赤い丸印が表示されているので、現在どの項目が開かれているかを瞬時に把握できます。

スライドダウン・スライドアップによるアニメーションも滑らかで使っていてとても心地良いです。また、アコーディオンは垂直に開閉するタイプなので、スマホやタブレットなど縦長のデバイスからの閲覧や操作もしやすいと思います。

複雑な機能を必要とせず、シンプルで使いやすい縦型アコーディオンを実装したい人は、ぜひ「Accordion-menu」を活用されてみてはいかがでしょうか?

no-imageシンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」前のページ

レスポンシブ対応のシンプルなLightboxプラグイン次のページno-image

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

  2. jQuery Section Navi Plugin
  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. Foxholder
  5. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

  6. jQuery ui material design datepicker

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP