Good flyout menu with Prototype?

[sleidia]

Hi guys,

I've spent nearly 3 hours looking for a free stable and crossbrowser vertical fly-out menu with unlimited sublevels.
It would be best if it could be based on prototype.js which I already use on the site.
Also, the categories should be ordered with nested divs instead of a javascript array.

Any good recommendation?

Thanks for the help!

[abduraooft]

Create a basic menu with html and CSS and then try to enhance the look and feel by adding some javascript effects(without losing the basic behaviour)
See http://www.htmldog.com/articles/suckerfish/dropdowns/ to get the basics

[sleidia]

Thank you.

But unfortunately, for this one to work, you have to know in advance the number of levels. I need a menu that can have any number of levels because it is built from a database of products categories.

So, it would be better for me to find a system that rely more on Javascript than CSS.
CSS should be used only for the appearance of every menu item.

Thanks again!

[ohgod]

look up scriptaculous. it's a control\display library built on top of prototype. it has a TON of toys in it.

[abduraooft]

Thank you.

But unfortunately, for this one to work, you have to know in advance the number of levels. I need a menu that can have any number of levels because it is built from a database of products categories.

So, it would be better for me to find a system that rely more on Javascript than CSS.
CSS should be used only for the appearance of every menu item.

Thanks again!I don't agree! We can dynamically create the html markup for a multi-level menu from the values obtained from the DB, and this would be a nested unordered list(of uls and lis). And the suckerfish CSS will automatically handle any level of items, if we properly write the required rules.
Say, this example (http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html) have 4 levels by default and the main behaviour of this menu is handled by
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}.
Now, if we have one more level, all that we need to add is
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul,#nav li.sfhover ul ul ul ul {
left:-999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul,#nav li li li li.sfhover ul {
left:auto;
}

A CSS based based menu ensures a higher level of accessibility, rather than a javascript based one, as people won't see any mouseover effects, if there is no javascript support.
And as a final note, it's hard for normal users to follow a menu beyond a level of 4.