iHwy jQuery ListNav Plugin Demos
Get it on Github

Donate via PayPal

Using defaults and a jQuery ID selector

This is the easiest way to use the plugin. None of the default options are overridden and a jQuery ID selector is used to bind the plugin to a single list. View the listnav.css file to see the core CSS we used for this and the other demos.


Overriding some defaults and binding to multiple lists

A jQuery class selector is used to bind to two lists. The 'includeAll' default option is overridden, which causes the ALL link to be hidden and the first letter with matches to get pre-selected. The 'noMatchText' default is overridden, providing a custom message for letters with no matching results.


    includeAll: false, 
    noMatchText: 'There are no matching entries.'

Using an OL instead of a UL, setting the initLetter and different CSS styling

The 'initLetter' option is set to letter 'c', which forces the list to load with that letter selected. The list is an OL (ordered list) and the numbers restart at 1 under each letter. The default listnav.css styling is overridden (see the #demoThree segments in the file) to give the navigation and list a different look.

    initLetter: 'c'
  1. 411 Services
  2. Accountants
  3. Accounting & Bookkeeping - General Service
  4. Acupuncture
  5. Advertising
  6. Advertising - Agencies & Counselors
  7. Advertising - Computer
  8. Advertising - Promotional
  9. Attorneys - Service Bureaus
  10. Auctioneers
  11. Audio Visual Consultants
  12. Audio Visual Production Service
  13. Automobile - Renting
  14. Automobile - Repair & Service
  15. Cabinet Makers
  16. Cabinets
  17. Cafeterias
  18. Calligraphers
  19. Campgrounds
  20. Dancing Instruction
  21. Data Communications Equipment & Systems - Networks
  22. Deck Builders
  23. Drywall & Insulation Contractors
  24. Earthquake Products & Services
  25. E-Commerce
  26. Education Centers
  27. Educational Consultants
  28. Educational Service - Business
  29. Electric Contractors
  30. Electric Transmission Equipment (Manufacturers)
  31. Electrolysis
  32. Erosion Control
  33. Gas - Liquefied Petroleum - Bottled & Bulk (Wholesale)
  34. Guide Service
  35. Gymnastic Instruction
  36. Halls & Auditoriums
  37. Handyman Services
  38. Hardware - Retail
  39. Hardwood
  40. Jewelers - Retail
  41. Jewelry - Designers
  42. Laboratories
  43. Laboratories - Research & Development
  44. Land Companies
  45. Landfills - Sanitary
  46. Lumber (Manufacturers)
  47. Lumber - Retail
  48. Machine Shops
  49. Parking Area & Lots Maintenance & Marking
  50. Parks
  51. Party Supplies
  52. Patio & Deck Cleaning & Restoration
  53. Paving Contractors
  54. Pumps (Wholesale)
  55. Roofing - Service Consultants
  56. Sand & Gravel (Wholesale)
  57. School Supplies (Wholesale)
  58. Schools & Educational Services
  59. Schools - Nursery & Kindergarten Academic
  60. Schools - Universities & Colleges Academic
  61. Shoe & Boot Repairing
  62. Shoes - Retail
  63. Shopping Centers & Malls
  64. Shower Doors & Enclosures
  65. Tutoring
  66. Ultrasonic Equipment & Supplies (Wholesale)
  67. Upholsterers
  68. Windows - Repairing
  69. Wineries
  70. Wines - Consultants
  71. Wines - Retail
  72. Woodworkers

Floating boxes and no number navigation

Anchor (A) tags in the list items are styled to look like boxes and the LI's are floated left so that they will dynamically wrap from left to right and down. Take a look at the listnav.css file used in this page to see how it's done (look for #demoFour). The 0-9 number navigation item is hidden by the includeNums:false option.

    includeNums: false

Using a session cookie and the onClick callback option

If you include the jquery.cookie js file in your page before the listnav js file, you can set the 'cookieName' option to have the listnav control remember your user's last clicked navigation item (the cookie value will be 'all', '_' for numbers 0-9 or a lowercase letter 'a' - 'z'). You can also use the 'onClick' callback to fire a custom function when a letter gets clicked. Click a letter to see the onClick function show you a message, then reload the page and come back to Demo 5 and you'll see that the list loads your last clicked letter (obtained from the cookie value).

    cookieName: 'ln-demo5',
    onClick: function(letter){
      alert('You clicked ' + ((letter == '_') ? '0-9' : letter.toUpperCase()) );

Using the includeOther and prefixes options.

Use the includeOther option to show a [...] navigation item for access to list items that start with something other than A-Z and 0-9 (such as Ä and Ü). If you'd like something like "The Valley News" or "The Willows Journal" to appear under V and W as well as under T, supply an array of prefixes using the prefixes option. Note: when using prefixes the ALL count will only include each item once.

    includeOther: true,
    prefixes: ['the','a']

©2009 iHwy, Inc. For support, post to the jQuery Plugins Forum with "listnav" in the subject line. No guarantees, but we monitor it regularly.