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. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  2. Bootstrap Carousel Touch Slider with Text Animation
  3. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  4. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  5. Animsition
  6. jQuery plugin Watermark

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP