by Shawn Kilmer, March 2008
Description: A sliding tree menu using mootools in about 20 lines of js, with the scripting 100% seperated from the content. No special id tagging or anything is required in your list, just a standard formatted list with ul and li components, the script will just figure out what to do.
When I was searching for a simple, nice, slideout tree menu that used a javascript framework instead of random hand-coded heavyweight garbage, I found that there was no established one for a framework like, say, mootools.
I thought it should be simple to write, and it was, except for one large problem I ran into that made me realize was probably the reason I didn't already find a mootools slide-out tree anywhere: if you are using the Fx.Slide control in a nested fashion, the outer Fx.Slides do not automatically resize themselves if inner Fx.Slides have changed. Annoying. While it seems to be an obvious thing to know ahead of time, it seems the mootools documentation is very careful about never mentioning this anywhere, that this could be a potential issue.
Solution: After your Fx.Slide happens, set your parent Fx.Slide div to have a null height attribute, forcing the browser to just interpret the height of the container based on its contents.
