I'd suggest using a structure rather than hierarchical divs; I've made tree menus mostly out of unordered lists. The children of any node in a list are then contained within an internal <ul> within the <li> of the node. Then, when a list item is clicked, you can open or close it's internal <ul> with toggling or, as I usually do it, changing the class name of the list item that you click. That way the class name can not only control the display of any internal <ul> but it can also alter the image that appears to the left of the <li> which indicates whether the list is expanded or collapsed.
-- Dash -- Dave Crane wrote: > On Tuesday 15 May 2007 14:14, Richard Quadling wrote: > >> I don't know if you ever saw this, but there was a JS based menu >> system called Joust (http://www.ivanpeters.com/). It was smaller than >> the DHTMLMenu work that was around at the time. >> >> One of the great features of this was being able to add to the menu >> dynamically. >> >> <snip> >> >> But it is NOT a prototype.js based menu system and is no longer supported. >> >> But the features like this would be great. >> >> > Shouldn't be too hard to do with Prototype. I've built several tree menus > over > the years using DOM and Javascript. The best thing you can do is to take > advantage of the DOM to do all your layout for you (makes sense, as the DOM > is a tree structure itself). Here's a rough recipe: > > For each node in the tree, provide a title node and a 'contents' node that > will contain any child nodes, each with their own title node and contents > node, recursively. The title node (or an element within it) can be set up > with a click event to Element.toggle() the contents node. > > If you want to load more nodes on the fly, you can generate the HTML for > these > extra nodes, which have a nice regular, generator-friendly structure, load it > up in an Ajax.Updater, and then use an onComplete or onSuccess callback to > add the toggle() interactivity - after finding all the title nodes using > $$(). > > I don't have a working copy that I can give away, unfortunately. There's a > working tree based on this approach at > http://mystring.info/xbhistory/index2.php, but it's a bit too complex to > serve as a learning example (e.g. we're using Effect.toggle() rather than > Element.toggle(), ust to show off!) - should at least explain the DOM > structure clearly if you point Firebug at it, though. > > HTH > > Dave > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
