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]

Originally Posted by 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!

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