Lister.js

Lister.js is a minimal jQuery plugin for handling selects as unordered lists.

Step One | Markup and jQuery

In this step, we're only calling lister without adding any styles to either the select or the unordered list.

Rendered

Code

Step Two | Markup, jQuery and Styles

Now that we've got the markup rendering from lister.js, we're adding appropriate styles that hide the select and turn the unordered list into a select-style element.

Rendered

Test the form by clicking submit. Your selection will appear as a query string in the URL.

Code

Step Three | All the Options

Now that we've got the basic markup and style for our lister selects, let's detail all the options.

Galleries of Styled Listers

Submitted by Nicholas Smith

This is a representation of a normal selector styled nicely

Submitted by Nicholas Smith

More blocky representation of a normal slider. Instead of appearing overhead, it appears below.

Submitted by Nicholas Smith

A unique emphasis of a solid block. Useful for selects that want to use images for options

©2013 Joel Sumner Smith. Created by Joel Smith from P'unk Avenue in Philadelphia.

Thanks are due both to Nick Smith and Kyle Stetz for their help in getting this project off the ground.