Creating multi-level, scrollable menus using jQuery and the jdMenu plugin

Question

In our application we're using jdMenu plugin to create a hierarchical menu from nested unordered lists.

This works well until there are so many items in a menu that it is forced off the screen.

In an attempt to fix this I've updated the plugin (actually the positionBy plugin that is a requirement of jdMenu) so that when a long menu is discovered the plugin reduces the height of the menu (ul), applies overflow:hidden and attempts to place it again. It then attaches a mousemove event to the menu so that when the users moves their mouse up and down the menu scrolls allowing them to see the hidden items. Like so:

(print screen doesn't capture pointer but on the left screen it's at the top of the menu, on the right it's at the bottom)

This works when it is the last menu in the hierarchy that is too long as above, however if a menu further up the hierarchy is too long then it's sub-menus are not displayed because of the overflow:hidden which has been applied.

So, my question is... is there another way to achieve this effect without using overflow:hidden (or can I use it in a better way)?

Alternatively, is there a more suitable jQuery plugin which will allow me to do something similar?

Let me know if you need any further clarification. Thanks loads.

Answer 1

Someone else already answered something like this:

This type of control is seen all too often in corporate applications: drop-down controls and lists that contain thousands of entries.

_{(source: mac.com)}

Programmers who mistakenly use it generally get a hint that it might be inappropriate when they find out that it takes an extraordinarily long time to load the form.

The following message, posted in a Visual Basic programmers forum on December 11, 1996, is typical:

I want to fill a list box with 2000 items ... This takes incredibly long ... over 20 minutes. Any ideas?

And another posted on December 16th, 1996, is somewhat less typical:

I'm looking for a list box control that can ... hold large numbers of entries (20,000+)

The excuse for such unwieldy controls is often a misguided interpretation of the almighty call to arms, "We must ensure data integrity." The programmers want to make sure that the user specifies a valid entry; in their view, the best way to do this is to force the user to select from a list. That would be fine if you had, say 20, 60, or maybe even 100 items in the list. Beyond that number, the fact that the user can only scroll a handful of items at a time causes the control to become unwieldy.

You are actually doing it not so bad, but can I suggest using some other way to do this? More menues? A multi step action?

---

Edit

You have this structure now:

Clients -> 
    Letters of alphabet [A-Z] -> 
        Clients beginning with selected letter -> 
            Contracts belonging to selected client

If I had to use drop down menus, I'd do the same thing.

But you could make a popup with a "Client" textbox/dropdownbox (only for a small ammount of clients), with autocomplete.

Once you've got the client selected, you'd have a listbox (for small ammounts) of a search feature for searching all the contracts belonging to the client. You could even search by name, date, number, etc.

Once you've selected and checked the contract is the one you are looking for, pressing OK would result in the same action you had.

Of course this seems a bit cumbersome next to dropdown menus, but consider that with that ammount of nesting, "search" is faster.

---

One more thing: Don't end up like this! :)

_{(source: mac.com)}