SweetDropdown

JavaScript

スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

SweetDropdownは、多彩なドロップダウンを実装することができるjQueryプラグインです。スタイリッシュなデザインで、さりげないアニメーションで表示される動作もすごくいい感じですね。使い方もシンプルでとてもわかりやすいですよ。

SweetDropdown

デモ

デモではスタンダードなものから、アイコンが付いたもの、ダークデザインのもの、表示位置を変更したもの、ドロップダウンにHTMLコンテンツを入れたものなどがあります。

各サンプルに設置されている「Try out!」というボタンをクリックすると、ドロップダウンが表示されます。

さりげないフェードアニメーションとともに表示されるドロップダウンは、シンプルでさまざまなサイトに似合いそうですね。

また、使い方もとても簡単で、オプションなどはHTMLタグ内に指定することでカスタマイズが可能です。ドロップダウンにアイコンを一緒に表示したり、表示させる位置を指定したりと、細かいカスタマイズができるところもグッドです。

互換性のあるブラウザは、IE11、Safari 6+、Firefox 4+、Chrome 20+、Opera 15+、Microsoft Edgeとのこと。

というわけで、スタイリッシュなデザインとアニメーションを備えた多彩なドロップダウンを実装できるjQueryプラグイン「SweetDropdown」のご紹介でした。

SweetDropdown

Stepper.js数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」前のページ

フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」次のページno-image

関連記事

  1. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  2. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  6. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP