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. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  2. no-image
  3. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  4. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  5. Changing Background Color while scrolling
  6. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

コメント

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

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

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP