Custom Select Menu jQuery Plugin

A jQuery Plugin that allows you to create custom select menus. To see the custom menu in action, check out the demo.

Usage

First, download and include custom-select-menu.jquery.js (or the minified/gzipped version) in your HTML document:

<script src="/path/to/custom-select-menu.jquery.js"></script>

Next, call the customSelectMenu() method on any select element in order to start customzing it. Note that you can pass the customSelectMenu() method an id, a class, or even just the select element itself.

$('select').customSelectMenu();

This will take a regular select menu such as this:

<select name="color-menu" id="my-color-menu">
  <option>Choose a color...</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

And turn it into this:

<div class="custom-select-menu" tabindex="0" id="my-color-menu">
  <label>Choose a color...</label>
  <ul style="display: none;">
    <li data-option-value="" class="selected">Choose a color...</li>
    <li data-option-value="red">Red</li>
    <li data-option-value="green">Green</li>
    <li data-option-value="blue">Blue</li>
  </ul>
  <input type="hidden" name="color-menu" value="" />
</div>

Options

The following are user-configurable options:

Option	Default Value	Type	Description
menuClass	custom-select-menu	String	The class name for the custom select menu div.
openedClass	opened	String	The class name given to the custom select menu label when the menu is open.
selectedClass	selected	String	The class given to the list item when an option has been selected.
selectionMadeClass	selection-made	String	The class given to the label when an option has been selected.

You can set these options by passing them to the customSelectMenu() method:

$('select').customSelectMenu({
  menuClass : 'my-menu',
  openedClass : 'shown',
  selectedClass : 'active',
  selectionMadeClass : 'has-been-selected'
});

Styling the Menu

There are no styles implied with this plugin because I didn't want to make any assumption about how someone would want the menu to look. For tips on styling the menu, take a look at the CSS on the demo page.

Requirements and Compatibility

Please note that this plugin requires jQuery version 1.8 or later.

License

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.