delightend / jquery-listnav

This plugin makes it easy for a web developer or designer to add a slick "letter-based" navigation bar to what would otherwise be an ordinary list of things. Clicking a letter quicky filters the list to show only items in that list.

jQuery-ListNav

This plugin makes it easy for a web developer or designer to add a slick "letter-based" navigation bar to what would otherwise be an ordinary list of things. Clicking a letter quicky filters the list to show only items in that list.

This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.

View the Demos

Highlights

• Easy to unobtrusively add to existing lists
• Works great on long lists: tuned for performance
• Works on both UL and OL (numbered) lists: when using an OL the numbers start at 1 for each filtered letter
• Can store the clicked letter in a cookie and reload the list using that letter (requires jquery.cookie plugin).
• Can work on multiple lists on the same page (content reflows when list size shrinks and grows)
• Designed with CSS styling in mind
• Works when LI items are floated (which opens the door for some interesting use cases)
• Works with any HTML inside LI's: first letter of actual text is found and used for filtering
• Demos are available to help you implement the plugin

More Information

For complete info about how to use this plugin, see the jQuery ListNav page at the iHwy, Inc. site.