The open source DropKick jQuery plugin allows you to create custom
dropdown menus, saving you time and tedium that typically comes with the usual
setup of making dropdowns from scratch. The DropKick example page
demonstrates several ways to implement it. 

The plugin was originally created by Jamie Lottering, and the default
theme was designed by Addison Kowalski, but it was recently taken over by Robert DeLuca and is available from GitHub as the download DropKick.js. Even though
DropKick has been around since July 2011, the recent changes and the hand over
to Mr. DeLuca indicate the plugin shows no signs of falling off the radar. According
to the resource repository page, Mr. DeLuca plans to make it one of the best
jQuery plugins available.

The one requirement

In order to use DropKick, your website or web pages must link to the
latest version of jQuery, which is currently jQuery 1.10.2. So you don’t have to worry about linking to the latest jQuery
version, the best practice implementation is to use the Google hosted libraries resources for jQuery,
using the script snippet below (this is added within the <head> section).

±Êâ¦Û+sÿڍ¬`¢ˆ%yªb±Ê&ý¨ÚÇùbnÏãªç«ËýuÓoãªç«Êh§ŽÏìr¸©

How
does the DropKick jQuery plugin work?
The DropKick plugin transforms your existing select <select> lists into
customizable HTML dropdowns. Name is the only required attribute — unless you
want to add keyboard tabbing to the dropdowns, and then you’ll need to add a tabindex attribute to enable
tabbed navigation. Since the DropKick plugin only uses these two attributes,
your existing forms and AJAX requests will work the same without having to make
major changes to your code. You’ll only need to set a “class” or
“id” to the select attributes.

Browser acceptance

According to the repository resource page, the DropKick plugin has been
tested and currently works in Opera 10+, Google Chrome 10+, Firefox 5+, Safari
5+, and Internet Explorer 7+.

Implementing the DropKick jQuery plugin

1. Be sure the jQuery library is called from the <head> of your website
or web pages.

2. Download DropKick.js
(which is available as a zip file), and then unzip the files to your web root
directory (i.e., web/dk). Then, at a minimum, add all the calls to these DropKick
script and CSS files:

  • dropkick.css
  • example.css
  • jquery.dropkick.js
  • jquery.dropkick-min.js

3. Set a “class” or “id” on the <select>
attributes. The example uses the following:

  • class=”default”
  • class=”change”
  • class=”custom_theme”

4. Call the JavaScript function found in the example, which is also included
within the download, and the snippet of the code is copied below:

±Êâ¦Ûr¥

Figure A shows the example page as displayed in Google Chrome.

Figure A

I also tested the example page on my iPhone using Google Chrome and found
all the dropdowns worked as expected (Figure B).

Figure B

Summary

If you’re looking to revamp your default dropdown menus, you might
consider using the DropKick jQuery plugin. Implementation is easy, and the
example page provides plenty of use case samples to get you started.