WebAppers

/ best free open source web resources /

Shopify

jQuery Navigation Control to Manage Alphabetical Lists

Posted · Category: GPL License, Menu, MIT License

jQuery ListNav 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.

ListNav works great on long lists. It supports multiple lists on the same page. And it has been tested on IE6, IE7, Firefox 2 and 3 (Windows and Mac), Safari (Windows and Mac).

jQuery listnav Plugin

Requirements: jQuery Framework
Demo: http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
License: MIT, GPL License

13 Comments
  • Ricky Lee

    Does not work in MobileSafari aka iPhone.

  • http://www.newshoemedia.com/ newshoemedia

    Perfect timing. I’ve been fascinated with using Alphabetical navigation for large websites lately (see officemax.com) – I’m going to see if I can’t hack this to work as an alphabetical drop down navigation menu – that will save me a lot of time.

  • Pingback: links for 2009-01-29 « Minesa IT

  • http://www.savemp3.net/ Chris

    thnx alot.

  • Pingback: jQuery ListNav: sistema di navigazione per grandi liste | Simone D'Amico

  • http://noxmediastudio.com Asinox

    Simple, is not working for me :(

  • http://fedmich.com/life fedmich

    I had implemented it before on our site on
    http://fedmich.com/anime/list/

    Thanks a lot to iHwy group and WebAppers :)

    @Asinox,
    maybe you forgot to add jquery before using the listnav js.
    or some plugins/file/js is conflicting it.
    I’ll be glad to help if you need me to, let me know.

  • http://www.xandydesign.com XandY Design

    This is really very useful, thanks for sharing it people.

  • Pingback: Dynamic, Sliding Content Using Vertical Navigation Bar « PIXEL SHOP

  • Bala

    Thanks a lot.This will more usefull.

  • http://www.facebook.com/malek.sufiyan.5 Malek Sufiyan

    Help me out.. How to work on this . ??? Reply asap..

  • http://www.facebook.com/malek.sufiyan.5 Malek Sufiyan

    Or reply me on my Email -id: sufiyanmalek78@gmail.com

  • Jade

    This would be extremely useful if a search functionality was added.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons