JavaScript

とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

個人的に使いやすそうだったので備忘録です。DropKickというjQueryプラグインを使ってみました。とても簡単にいい感じのドロップダウンを実装することができます。テーマカラーもホワイトとブラックがあります。それ以外のテーマを自分で作成することもできるので、その辺も自分のサイトに合うデザインへのカスタマイズがしやすいかと思います。ということで使い方です。

[ads_center]

使い方

ダウンロードしたプラグインファイルを読み込んでいきます。

<link rel="stylesheet" href="dropkick.css" type="text/css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8"></script>

ブラックのテーマを使いたい場合は以下のCSSも読み込んでおきます。

.dk_theme_black {
    background: #aebcbf; /* Old browsers */
    background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #aebcbf), color-stop(50%, #6e7774), color-stop(51%, #0a0e0a), color-stop(100%, #0a0809)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809', GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* W3C */
}
.dk_theme_black .dk_toggle,
.dk_theme_black.dk_open .dk_toggle {
    background-color: transparent;
    background-image: url('images/dk_arrows_white.png');
    color: #fff;
    text-shadow: none;
}
.dk_theme_black .dk_options a {
    background-color: #333;
    color: #fff;
    text-shadow: none;
}
.dk_theme_black .dk_options a:hover,
.dk_theme_black .dk_option_current a {
    background-color: #E15A01;
    color: #fff;
    text-shadow: #604A42 0 1px 0;
}

そして、ドロップダウンをセットします。

<script type="text/javascript" charset="utf-8">
$(function () {
    // デフォルト
    $('.default').dropkick();

    // ブラック
    $('.black').dropkick({
        theme : 'black'
    });
});
</script>

HTMLはとりあえずシンプルにこんな感じで。

<form action="#" method="post">
    <select name="sample1" class="default">
        <option value="">サンプル1</option>
        <option value="test1">test1</option>
        <option value="test2">test2</option>
        <option value="test3">test3</option>
        <option value="test4">test4</option>
        <option value="test5">test5</option>
    </select>

    <select name="sample2" class="black">
        <option value="">サンプル2</option>
        <option value="test1">test1</option>
        <option value="test2">test2</option>
        <option value="test3">test3</option>
        <option value="test4">test4</option>
        <option value="test5">test5</option>
        <option value="test6">test6</option>
        <option value="test7">test7</option>
        <option value="test8">test8</option>
        <option value="test9">test9</option>
        <option value="test10">test10</option>
    </select>
</form>

自分でテーマを作成したい場合はプラグインフォルダにあるblank_theme.cssで作ることができます。

ということでシンプルで使いやすいプラグインでした。以下のサイトからダウンロードすることができます。

関連記事

  1. no-image

    JavaScript

    シンプルで美しい軽量のjQueryモーダルウィンドウ「umodal」

    umodalはスッキリしたシンプルで美しいモーダルウィンドウを実装でき…

  2. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  3. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  4. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  5. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  6. BookBlock Revised

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP