Developer

Customize dropdown menus with the DropKick jQuery plugin

If you want to revamp your default dropdown menus, give the DropKick jQuery plugin a try.

DropKickjs_thumb_100713.gif
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).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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:

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

      $('.black').dropkick({
        theme : 'black'
      });
       $('.existing_event').dropkick();

      $('.change').dropkick({
        change: function (value, label) {
          alert('You picked: ' + label + ':' + value);
        }
      });

      $('.custom_theme').dropkick({
        theme: 'black',
        change: function (value, label) {
          $(this).dropkick('theme', value);
        }
      });

      $('.dk_container').first().focus();
    });
  </script>

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

Figure A

DropKickjs_FigA_100713.gif

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

Figure B

DropKickjs_FigB_100713.gif

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. 

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks

Free Newsletters, In your Inbox