vDrop

JavaScript

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

vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してくれるとても軽量なjQueryプラグインです。このような仕様は様々なところで活躍します。ECサイトの商品検索での絞り込み、お問い合わせフォーム画面の入力補助などで特に多く見られます。メリットとして、見える情報量が最小限で済むので、シンプルなページを作成できます。

また、選択肢があらかじめ準備されているので、ユーザーにサイトの使いやすさを提供できます。それでは、vDropについて詳しく見ていきましょう。

vDrop

デモ

vDropを使用する際、jQueryライブラリを必ず読み込みましょう。これにより、ページの読み込みスピードも上がります。

<link href="vdrop.min.css" rel="stylesheet">
<script src="jquery.vdrop.min.js"></script>
$('select').vDrop();
$('select').vDrop({
  transitionSpeed: 200,
  allowMultiple: true,
});

プラグインの配布サイトでは、残念ながら詳しい使用方法が記載されていません。

ドロップダウンリストを簡単に設置はできますが、最低限の指示のみとなります。しかし、シンプルなデザインにこだわらず、CSSを利用して様々なデザインを楽しむことが可能です。「ドロップダウンリストの機能のみが欲しい」という方にぜひチェックしていただきたいです。

vDrop

js-offcanvas上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」前のページ

ビューポート外のコンテンツ表示を防止できる「jQuery.appear」次のページjQuery.appear

関連記事

  1. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  2. EasyFader Plugin Demo

    JavaScript

    レスポンシブ対応で軽量なフェードスライドショーを実装する「EasyFader Plugin Demo…

    シンプルなフェードアニメーションによるスライドショーを実装することがで…

  3. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  4. cascadingDivs
  5. Trunk.js

    JavaScript

    滑らかなスライド表示がいい!レスポンシブなナビゲーションメニュー「Trunk.js」

    Trunk.jsはレスポンシブに対応したナビゲーションメニューを実装す…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP