iHwy Development Blog

New versions of our jQuery listnav and listmenu plugins are now available:

http://www.ihwy.com/labs/jquery-listnav-plugin.aspx
http://www.ihwy.com/labs/jquery-listmenu-plugin.aspx

What's new:

ListNav plugin

1. added an includeOther option to provide a top level '...' nav link to access items that start with chars other than A-Z and 0-9. For example, chars like Ä and Ü.

2. added a prefixes option to provide a way to show "The New York Times" under T and N. Pass in your own prefix array.

See the new demo 6 here for examples of both:

    http://www.ihwy.com/labs/Demos/Current/jquery-listnav-plugin.aspx

ListMenu plugin

1. added an includeOther option, just like the one for the ListNav plugin.

2. added an onClick option that simplifies handling clicks in the dropdown menu (for things like pulling an href out of the clicked link to use it for an ajax call). The onClick uses event delegation, so is low overhead and the clicked object is available as a jquery object in your onClick function.

See demo 3 here for includeOther example and demo 6 for onClick example:

    http://www.ihwy.com/labs/demos/current/jquery-listmenu-plugin.aspx

Some of these features were based on user requests from the jQuery community. Thanks to everyone for the feedback!

Today we released the iHwy listmenu plugin, which allows a web developer or designer to convert a basic 'list' of HTML elements (UL, OL or any set of child elements) into a snazzy dropdown menu with letter-based navigation (ie: A | B | C | etc).

The plugin is very easy to use. In most cases all a web developer will have to do is create the list of elements and then use one line of jQuery code to convert the list into the navigation menu. When a user hovers over a navigation letter in the menu a submenu appears containing all of the items from the list that start with that letter.

The items in the submenu are arranged in nicely balanced columns. If the list was an ordered (OL) list, numbering starts at 1 for each letter and is maintained across the columns (top to bottom, left to right) for that letter. There are options to control the number of columns and the 'gutter' space between them, among other things.

The HTML generated by the plugin is designed with CSS styling in mind and a starter css file is included to help implement the plugin.

We tuned this plugin for speed and tested it in FF 3.x (Win/Mac), IE 6/7/8rc, Opera (latest), Safari (Mac 3.2.1, Win 4beta) and Google Chrome (Win) using jQuery 1.3.2 and 1.2.6 (1.3.2 is faster, probably because of sizzle).

This is great plugin for big product lists, address books, contact lists, etc. It makes a hard to navigate plain old list into something really compact and very easy to visually skim that's only visible when you need it.

Full documentation:

    http://www.ihwy.com/Labs/jquery-listmenu-plugin.aspx

Multiple demos:

    http://www.ihwy.com/Labs/demos/current/jquery-listmenu-plugin.aspx


This project grew out of the jquery listnav plugin that we released in late 2008 (and released a new version of today). It's been exciting to work on these contributions to the open source world. We hope you enjoy them!