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で作ることができます。

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

nth-child()とnth-last-child()CSSのnth-child()とnth-last-child()の使い方をまとめてみる前のページ

Photoshopのスポット修正ブラシツールを使ってみたらすごい便利だった次のページ

関連記事

  1. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  2. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  3. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  4. no-image

    JavaScript

    かっこいいニュース・バナースライドショー実装「jQuery News Slider」

    jQuery News Sliderは、かっこいいニュース・バナースラ…

  5. LuminJS

    JavaScript

    テキストを徐々にハイライトしていく「LuminJS」

    LuminJSはWebページ上のテキストを徐々にハイライトしていくJa…

  6. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP