こんなデザインのセレクトメニューが欲しかった!華麗なスタイルのDropKick.js

こんなデザインのセレクトメニューが欲しかった!華麗なスタイルのDropKick.jsサンプル 味気ないフォームを彩りたい時にはDropKick - a jQuery plugin for beautiful dropdownsを利用するとセレクトメニューを印象的なデザインに変更することができます。

使用方法 DropKick - a jQuery plugin for beautiful dropdownsからファイルをダウンロード。
<link rel="stylesheet" href="dropkick.css" type="text/css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.dropkick-1.0.0.js"></script>
<script type="text/javascript">
$(function() {
$('.class名').dropkick();
});
</script>

あとはいつものようにselectを記述します。
<select class="class名">
<option value="">Choose a reaction</option>
<option value="amazed">Amazed</option>
<option value="bored">Bored</option>
<option value="surprised">Surprised</option>
</select>

また、簡単にオリジナルデザインが作れます。
CSSで.dk_theme_***とclassを振ったものを作成し、オプションを以下のようにします。
$('.class名').dropkick({
theme: '****'
});


こんなデザインのセレクトメニューが欲しかった!華麗なスタイルのDropKick.jsサンプル

sponsors

「こんなデザインのセレクトメニューが欲しかった!華麗なスタイルのDropKick.js」をシェアする

記事作成:
記事URL:

TOP > > こんなデザインのセレクトメニューが欲しかった!華麗なスタイルのDropKick.js