Using defaults to display 400+ items

This is the easiest way to use the plugin. The defaults are left as is (4 columns with 40px spacing between them). In this example a plain UL list of 400+ items is converted to a snazzy dropdown menu. See demo 2 for how the UL looked before the listmenu plugin was applied.


  $('#demo1').listmenu();

Some placeholder text

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Before and after applying the listmenu plugin

This example shows the same UL list used for demo 1 before the listmenu plugin is applied. Scroll down to view the full list, then click the button to apply the listmenu plugin.

Some placeholder text

Overriding some of the defaults

In this example, we override default values for some of the listmenu options. Since the list has no items starting with numbers and some items that start with a characters other than A-Z (like Ä and Ü), we set includeNums:false and includeOther:true. We also customize the text that appears when a letter has no matching items, hide the 'counts' that oridinarily appear above the menu and set the column count to 5 with a 15px gutter between the columns.


  $('#demo3').listmenu({
    includeNums: false, includeOther: true, showCounts: false,
    noMatchText: 'No items under this letter',  cols:{ count:5, gutter:15 }
  });

Some placeholder text

Using an OL ordered list

This example shows using an OL and the default options. Items under each menu item start at 1 and stay in sequence across columns.


  $('#demo4').listmenu();

Some placeholder text

Using any kind of child elements

You can use any type of HTML elements for the menu. The listmenu plugin treats the first level of child elements as the items to be used for the menu (make sure they are block elements or styled with 'display:block' so that they appear as a list and not next to each other). Any content inside the child elements comes alongs for the ride. Take a look a the menu under letter 'D' for a trick that will let you create a subtitle for a submenu without having to start the subtitle with the same letter as the items in the submenu.


  $('#demo5').listmenu();

0-9 items are in <p> tags

101 pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.

202 tristique senectus et netus habitant.

505 pellentesque habitant morbi tristique senectus et netus et.

606 malesuada.

621 tristique senectus et netus.

730 pellentesque habitant morbi tristique senectus et netus et.

781 habitant morbi tristique senectus.

804 tristique senectus et netus habitant.

833 pellentesque habitant morbi tristique senectus et netus et.

870 tristique senectus et netus.

971 tristique senectus et netus habitant.

A items are in <div> tags, except this one, which is in a <p> tag. You can mix and match.

A tristique senectus et netus.

A tristique senectus et netus habitant.

A pellentesque habitant morbi tristique senectus et netus et.

A pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.

A malesuada.

A tristique senectus et netus.

A pellentesque habitant morbi tristique senectus et netus et.

A habitant morbi tristique senectus.

A malesuada.

A tristique senectus et netus habitant.

A pellentesque habitant morbi tristique senectus et netus et.

A tristique senectus et netus.

A tristique senectus et netus habitant.

B items are in <a> tags (styled with display:block)

Blogbean Blogclub Blogpoint Bluepoint Bluespan Browsecat Browsevine Bubblecast Bubblelounge Bubblenation BuzzXS

C items are in various tags (<a> tags are styled with display:block)

C tristique senectus et netus.

C pellentesque habitant morbi tristique senectus et netus et.

C malesuada.

Cluepoint Cropcat

C habitant morbi tristique senectus.

Cluespan

C pellentesque habitant morbi tristique senectus et netus et.

C malesuada.

C tristique senectus et netus habitant.

C pellentesque habitant morbi tristique senectus et netus et.

Clogpoint Cropvine

DThis sentence doesn't start with D, but appears under D because the item starts with a hidden 'D' in a span with style="display:none"

D pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.

D tristique senectus et netus habitant.

D pellentesque habitant morbi tristique senectus et netus et.

D malesuada.

D tristique senectus et netus.

D pellentesque habitant morbi tristique senectus et netus et.

D habitant morbi tristique senectus.

D tristique senectus et netus habitant.

D pellentesque habitant morbi tristique senectus et netus et.

D malesuada.

D tristique senectus et netus.

Some placeholder text

Address book

This example shows how the content of child elements are kept with each list item, creating an easy access address book. It also shows use of the onClick option to fire a function when the user clicks a link in the dropdown menu.


  $('#demo6').listmenu({
    noMatchText: 'No contacts available', cols:{ count:3, gutter:35 },
    onClick:function($target){ if($target.is('a')){ alert($target.text() + ' was clicked'); }}
  });

Agilith
123 Main St.
San Francisco, CA 94117
Aible
123 Main St.
San Francisco, CA 94117
Aivee
123 Main St.
San Francisco, CA 94117
Babbleworks
123 Main St.
San Francisco, CA 94117
Blogbean
123 Main St.
San Francisco, CA 94117
Blognation
123 Main St.
San Francisco, CA 94117
Bluepoint
123 Main St.
San Francisco, CA 94117
Browsecat
123 Main St.
San Francisco, CA 94117
Bubblecast
123 Main St.
San Francisco, CA 94117
Bubblelounge
123 Main St.
San Francisco, CA 94117
Bubblenation
123 Main St.
San Francisco, CA 94117
BuzzXS
123 Main St.
San Francisco, CA 94117
Camidel
123 Main St.
San Francisco, CA 94117
Centiba
123 Main St.
San Francisco, CA 94117
Centiveo
123 Main St.
San Francisco, CA 94117
Chatbridge
123 Main St.
San Francisco, CA 94117
Chatfish
123 Main St.
San Francisco, CA 94117
Chatterbird
123 Main St.
San Francisco, CA 94117
Chatterblab
123 Main St.
San Francisco, CA 94117
Chatterware
123 Main St.
San Francisco, CA 94117
Cogilia
123 Main St.
San Francisco, CA 94117
Coginti
123 Main St.
San Francisco, CA 94117
Dablist
123 Main St.
San Francisco, CA 94117
Dazzletube
123 Main St.
San Francisco, CA 94117
Devjam
123 Main St.
San Francisco, CA 94117
Devlinks
123 Main St.
San Francisco, CA 94117
Devmix
123 Main St.
San Francisco, CA 94117
Devpoint
123 Main St.
San Francisco, CA 94117
Divanix
123 Main St.
San Francisco, CA 94117
Divanu
123 Main St.
San Francisco, CA 94117
Dynambu
123 Main St.
San Francisco, CA 94117
Dynanti
123 Main St.
San Francisco, CA 94117
Eanoodle
123 Main St.
San Francisco, CA 94117
Eanu
123 Main St.
San Francisco, CA 94117
Edgefish
123 Main St.
San Francisco, CA 94117
Edgeopia
123 Main St.
San Francisco, CA 94117
Fagen
123 Main St.
San Francisco, CA 94117
Famia
123 Main St.
San Francisco, CA 94117
Feedbeat
123 Main St.
San Francisco, CA 94117
Feedbridge
123 Main St.
San Francisco, CA 94117
Feedshare
123 Main St.
San Francisco, CA 94117
Fivetype
123 Main St.
San Francisco, CA 94117
Flashshare
123 Main St.
San Francisco, CA 94117
Flashtype
123 Main St.
San Francisco, CA 94117
Flipset
123 Main St.
San Francisco, CA 94117
Gabpoint
123 Main St.
San Francisco, CA 94117
Gevee
123 Main St.
San Francisco, CA 94117
Gigacat
123 Main St.
San Francisco, CA 94117
Gigapad
123 Main St.
San Francisco, CA 94117
Gigapedia
123 Main St.
San Francisco, CA 94117
Idel
123 Main St.
San Francisco, CA 94117
Innoify
123 Main St.
San Francisco, CA 94117
Innotype
123 Main St.
San Francisco, CA 94117
Inyx
123 Main St.
San Francisco, CA 94117
Itz
123 Main St.
San Francisco, CA 94117
Jabberify
123 Main St.
San Francisco, CA 94117
Jalith
123 Main St.
San Francisco, CA 94117
Jaxnation
123 Main St.
San Francisco, CA 94117
Jazio
123 Main St.
San Francisco, CA 94117
Jumpspan
123 Main St.
San Francisco, CA 94117
Katz
123 Main St.
San Francisco, CA 94117
Kaylith
123 Main St.
San Francisco, CA 94117
Kayzu
123 Main St.
San Francisco, CA 94117
Kidoo
123 Main St.
San Francisco, CA 94117
Kimbo
123 Main St.
San Francisco, CA 94117
Leeba
123 Main St.
San Francisco, CA 94117
Leedeo
123 Main St.
San Francisco, CA 94117
Leemia
123 Main St.
San Francisco, CA 94117
Linkbox
123 Main St.
San Francisco, CA 94117
Linktune
123 Main St.
San Francisco, CA 94117
Livetag
123 Main St.
San Francisco, CA 94117
Mimm
123 Main St.
San Francisco, CA 94117
Myble
123 Main St.
San Francisco, CA 94117
Mystorm
123 Main St.
San Francisco, CA 94117
MyXS
123 Main St.
San Francisco, CA 94117
Myzio
123 Main St.
San Francisco, CA 94117
Nfire
123 Main St.
San Francisco, CA 94117
Nfish
123 Main St.
San Francisco, CA 94117
Ocero
123 Main St.
San Francisco, CA 94117
Omm
123 Main St.
San Francisco, CA 94117
Onu
123 Main St.
San Francisco, CA 94117
Oyobox
123 Main St.
San Francisco, CA 94117
Oyolane
123 Main St.
San Francisco, CA 94117
Oyovee
123 Main St.
San Francisco, CA 94117
Photobean
123 Main St.
San Francisco, CA 94117
Pixonoodle
123 Main St.
San Francisco, CA 94117
Pixonu
123 Main St.
San Francisco, CA 94117
Pladeo
123 Main St.
San Francisco, CA 94117
Podbeat
123 Main St.
San Francisco, CA 94117
Quayo
123 Main St.
San Francisco, CA 94117
Quiveo
123 Main St.
San Francisco, CA 94117
Realcube
123 Main St.
San Francisco, CA 94117
RealXS
123 Main St.
San Francisco, CA 94117
Rifffire
123 Main St.
San Francisco, CA 94117
Riffpedia
123 Main St.
San Francisco, CA 94117
Riffshare
123 Main St.
San Francisco, CA 94117
Roope
123 Main St.
San Francisco, CA 94117
Skambee
123 Main St.
San Francisco, CA 94117
Skamia
123 Main St.
San Francisco, CA 94117
Skazio
123 Main St.
San Francisco, CA 94117
Skimm
123 Main St.
San Francisco, CA 94117
Skinti
123 Main St.
San Francisco, CA 94117
Skipworks
123 Main St.
San Francisco, CA 94117
Skixo
123 Main St.
San Francisco, CA 94117
Snapbird
123 Main St.
San Francisco, CA 94117
Snapsphere
123 Main St.
San Francisco, CA 94117
Tagdog
123 Main St.
San Francisco, CA 94117
Tagtube
123 Main St.
San Francisco, CA 94117
Tagwire
123 Main St.
San Francisco, CA 94117
Tamm
123 Main St.
San Francisco, CA 94117
Tazzy
123 Main St.
San Francisco, CA 94117
Tekmix
123 Main St.
San Francisco, CA 94117
Tekpath
123 Main St.
San Francisco, CA 94117
Tektype
123 Main St.
San Francisco, CA 94117
Thoughtware
123 Main St.
San Francisco, CA 94117
Thoughtwire
123 Main St.
San Francisco, CA 94117
Truloo
123 Main St.
San Francisco, CA 94117
Truva
123 Main St.
San Francisco, CA 94117
Truzz
123 Main St.
San Francisco, CA 94117
Twitterchat
123 Main St.
San Francisco, CA 94117
Vizz
123 Main St.
San Francisco, CA 94117
Voonoodle
123 Main St.
San Francisco, CA 94117
Voonyx
123 Main St.
San Francisco, CA 94117
Wikinder
123 Main St.
San Francisco, CA 94117
Yakimia
123 Main St.
San Francisco, CA 94117
Yakiva
123 Main St.
San Francisco, CA 94117
Yakivu
123 Main St.
San Francisco, CA 94117
Yaveo
123 Main St.
San Francisco, CA 94117
Yoble
123 Main St.
San Francisco, CA 94117
Yodel
123 Main St.
San Francisco, CA 94117
Yonu
123 Main St.
San Francisco, CA 94117
Youbuzz
123 Main St.
San Francisco, CA 94117
Younation
123 Main St.
San Francisco, CA 94117
Zatri
123 Main St.
San Francisco, CA 94117
Zoomm
123 Main St.
San Francisco, CA 94117
Zoompad
123 Main St.
San Francisco, CA 94117
Zoompulse
123 Main St.
San Francisco, CA 94117

Some placeholder text

©2009 iHwy, Inc. For support, post to the jQuery Google Group with "listmenu" in the subject line. No guarantees, but we monitor it regularly. Thanks to HTML Ipsum and Web 2.0 Name Generator for some placeholder content. Tap into our jQuery skills for your project! Shoot us a message.

iHwy jQuery ListMenu Plugin DemosClick for main documentation

Using defaults to display 400+ items

Some placeholder text

Before and after applying the listmenu plugin

Some placeholder text

Overriding some of the defaults

Some placeholder text

Using an OL ordered list

Some placeholder text

Using any kind of child elements

Some placeholder text

Address book

Some placeholder text

iHwy jQuery ListMenu Plugin Demos
Click for main documentation