Not Rated!

Hwy 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.

Requirements

This plugin was developed and tested using jQuery 1.3.2 and tested using that and jQuery 1.2.6. We recommend using jQuery 1.3.2 or higher for the best performance.
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).
Usage

1. Include jquery and the listmenu plugin in your page:

 <script type="text/javascript" src="js/lib/jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="js/lib/jquery.listmenu-1.1.js"></script>  

(adjust the src path for the files based on where your files are located)

2. Add some HTML for your list. Your list wrapper must have an id attribute. For example:

   <ul id="myList">
    <li><a href="#">A item</a></li>
    <li><a href="#">B item</a></li>
    <li><a href="#">C item</a></li>
    etc...
  </ul> 

See the demos for more examples of the HTML you can use (other than UL > LI). Note: the # href’s above are just placeholders. You would use your actual href’s in those. Any HTML can be used inside of your list items.

3a. Create your listmenu using the defaults (here wrapped in the jQuery document ready function):

 <script type="text/javascript">
    $(function(){
      $('#myList').listmenu();
    });
  </script>  

3b. Or override some of the defaults. Here we’re overriding all of them:

 <script type="text/javascript">
    $(function(){
      $('#myList').listmenu({
        includeNums: false,
        includeOther: true,
        flagDisabled: false,
        noMatchText: 'No items under this letter',
        showCounts: false,
        menuWidth: 825,
        cols:{
          count: 5,
          gutter: 15
        },
        onClick:function($target){
         if($target.is('a')){
          alert($target.text() + ' was clicked');
         }
        }
      });
    });
  </script>  

Note: you can use any jQuery selector with .listmenu(). For example, if you have two lists on a page and you want to activate them both using the same listmenu options and both have the ‘list’ class on them, you could do:

 <script type="text/javascript">
    $(function(){
      $('.list').listmenu(); // set any options you want for all lists with the 'list' class
    });
  </script>  

Demo: http://www.ihwy.com/labs/demos/current/jquery-listmenu-plugin.aspx#tab1
Download: http://www.ihwy.com/labs/downloads/jquery-listmenu/1.1/jquery.listmenu-1.1.js
Source: http://www.ihwy.com/labs/jquery-listmenu-plugin.aspx

Related Listings:

1. jQuery hover accordion Script This is yet another accordion script, except you don’t have…
2. jQuery Address – Deep linking plugin This is a jQuery plugin to allow users to select…
3. jQuery Plugin: Tokenizing Autocomplete Text Entry This is a jQuery plugin to allow users to select…