jQuery ListMenu Plugin

jQuery ListMenu Plugin

This jQuery plugin, developed in the iHwy Labs, allows you to easily convert a long, hard to navigate list into a compact, easily skimmable 'first-letter' based menuing system, allowing quick and 'out-of the-way' access to hundreds of items. Users hover their mouse over a letter and a columnized list of all of the list items that start with that letter appear in a submenu. Mousing off of the letter or menu closes the submenu. Mousing between letters is very fast and the columns in the submenu are nicely balanced.

This is great for product lists, address books, contact lists, lists of hotels, parks and recreation areas, etc.

Highlights

  • Easy to unobtrusively add to existing lists of HTML elements.
  • Works nicely with UL and OL lists as well as any 'list' of HTML elements (child elements under a parent element).
  • Uses the first found letter of "actual text" in each list item (even if the text is nested inside multiple HTML tags) to determine what navigation letter to put the item under.
  • Creates balanced-height columns in the dropdown menu, taking into account the actual height of each element, rather than just going by count.
  • If your list is an OL, numbering in each submenu starts at 1 and is carried across columns, top to bottom, left to right, maintaining a logical sequence.
  • Optional hovering "record count" over each letter shows user how many items are under the letter.
  • Optional '[0-9]' menu item for access to list items that start with a number.
  • Optional '[...]' menu item for access to list items that start with punctuation or chars like Ä and Ü.
  • Optionally set the text that appears if a letter with no list items is clicked.
  • Designed with CSS styling in mind. Style all aspects of the list navigation and dropdown menu via CSS.
  • Make letters with no list items appear "disabled" using an optional CSS class.

Supported Browsers

We tested this plugin on Firefox 3.x (Windows/Mac), IE6, IE7, IE8/rc (Windows), Safari (Mac 3.2.1, Windows 4.0 beta), Google Chrome (Windows) and Opera 9.6.3 (Windows).

Demo: Check the demo
URL: http://www.ihwy.com/labs/jquery-listmenu-plugin.aspx

Download

Version 1.1
- Source: jquery.listmenu-1.1.js
- Packed: jquery.listmenu.pack-1.1.js
- Minified: jquery.listmenu.min-1.1.js
jQuery ListMenu Plugin jQuery ListMenu Plugin Reviewed by Bhaumik Patel on 9:17 PM Rating: 5