Skip to content

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.

Notifications You must be signed in to change notification settings

alex-mashin/jQuery-ListNav

 
 

Repository files navigation

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.

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%