Using jQuery Listnav Plugin

Yesterday I was looking around for a creative way to display what will eventually become a very large list of information. Generally I would just use extra links and sort them alphabetically. For me it had never seen like the most ideal solution. Forcing the user to wait while the page reloads itself is actually a bad solution. What if you could just have all the information load once and the user could then instantly browse all that information?

This is how I came across the jQuery ListNav Plugin by iHwy. It does exactly what I was looking for. It takes a large list of information and makes it very easy to work with.

All you have to do is place the location you want the navigation bar to go, then you create your unordered list, and then just put in a single jQuery command and it does the rest. It could not be simplier.

I have so many different ideas where this could be used. The one I probably see is creating an interactive product listing for an eCommerce site. Many websites make HTML versions of their sitemaps for SEO rankings. These pages generally have little to no use for the end customer because it usually is just a bunch of links displayed. With this plugin, you really could make this information useable by customers. A very neat concept.

You can view the demo of the plugin in action here. You can also view how I used this on another one of my websites by clicking here.

Comments (2)

  1. Robert says:

    Greetings — I’ve been toying with this plugin for about a day and a half, and while I’m not versed in jQuery, I am a programmer and I cannot seem to figure out how to implement this.. You say you just “put in a single jQuery command”, but to the uninitiated, it doesn’t look so cut-and-dry… I’ve downloaded the latest copy of jQuery, their three .js files and their .css file, made my LI list the same way they describe, but yet my alphabet nav does not appear.. I have no idea what’s missing, but I am wondering if the developers assume everyone has a comfortable knowledge of jQuery to know what to adjust/add. Is there anything not obvious to the non-jQuery programmer I’d need to do to get this to work? :)

  2. admin says:

    Robert-

    Do you have a page that is accessible via the internet so I can take a look at what could be going on with your page?

    Or can you send the HTML output of your page to me at joshpennington at learn jquery now dot com so I can see what is going on?

    I’ll see what I can do what I can to get you up and running.

    Josh

Leave a Reply