jQuery

How To Create Nice Looking Dropdowns Using DropKick.js

In today's tutorial we are going to use a nice jQuery plugin which will change the style of your select boxes by converting them to use divs and list items.

Dropkick Demo

The reason it will convert the select box to a div and list items is because now it is easier to style in what ever way you want. With normal select boxes you can style the top selected option but you can't easily style the dropdown options of the select box. When these are list items you can apply a CSS class to the selected item and change the style.

What Is DropKick.js

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making it look good.

DropKick will also degrade gracefully so if Javascript is turned off then it will just keep the original select box.

How To Use DropKick.js

To start using DropKick.js you first need to download the files you need from GitHub.

Download

All you have to do in copy the files over to your project and include the DropKick CSS file and DropKick JS file.

<!-- Include DropKick.css -->
<link rel="stylesheet" href="./css/dropkick.css">

<!-- Include DropKick.js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="./js/jquery.dropkick-1.0.0.js"></script>

Now all we have to do is create a new select box and assign DropKick to this new select box.

<select name="country" class="default" tabindex="2">
      <option value="">Try Me!</option>
      <option value="AU">Australia</option>
      <option value="CA">Canada</option>
      <option value="DE">Germany</option>
      <option value="JP">Japan</option>
      <option value="GB">United Kingdom</option>
      <option value="US">United States</option>
</select>

Assign DropKick to this select box by using the following Javascript method.

$(document).ready(function(){
	$('.default').dropkick();
});

View the demo to see what this will create.

Demo

Attach A On Change Event

In most cases when using select boxes you want something to happen when you select and option.

In jQuery this can easily be done by assigning the change event to the select box.

$('select').change();

To add a change event to the dropkick select boxes can be done by using the following code.

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

Add Your Own Styles

To create your own theme you need to assign a theme to your DropKick by using the following code.

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

Now copy the below CSS and use change the styles to however you want your new dropdowns to look like.

/**
 * Your theme name here
 *
 * Say something about the theme
 *
 * Give yourself some credit here
 *
 */

/* Container */
.dk_mytheme .dk_container {}
  .dk_mytheme a {}

/* Toggle */
.dk_mytheme .dk_toggle {}
  .dk_mytheme .dk_toggle:hover {}

/* Focus State */
.dk_mytheme.dk_focus,
.dk_mytheme:focus {}
  .dk_mytheme.dk_focus .dk_toggle {}
  
/* Open State */
.dk_mytheme.dk_open {}
  .dk_mytheme.dk_open .dk_toggle {}

/* Options Menu */
.dk_mytheme .dk_options {}
  .dk_mytheme .dk_options a {}
  .dk_mytheme .dk_options a:hover,
  .dk_mytheme .dk_option_current a {}

/* Inner options */
.dk_mytheme .dk_options_inner {}

/* Set a width property here */
.dk_mytheme .dk_options_inner,
.dk_mytheme.dk_touch .dk_options {}

Download

DropKick.js files are hosted on Github so they are free to download and you will be told of any updates when you follow the project, just click the link below to download the files.

Download

To see how DropKick.js works view the demo page.

Demo

Back to top

Learn how to code with Treehouse

  • Learn projects with access to 1000+ videos
  • Practice live with our Code Challenge Engine
  • Get help in our members-only forums

Start with a 7 day free trial