xCollapsible toggles an element's 'display' property when a 'trigger' element is clicked. This behavior is applied to all of the element's nested elements. It works with 2 different HTML structures. The first demo is made of nested ULs, and the second is made of nested DIVs with an H element preceding each DIV (I use this on some of the main pages of my site). Only the outermost UL (or DIV) needs an ID.
xMenu5 is an experimental version of xCollapsible with more features. (17Apr07: note that xMenu6 should be used instead of xMenu5.)
Have a look at the Javascript: xMenu5, xCollapsible.
View the source of this page to see the onload/onunload code.
xCollapsible: Only a click will open or close a label. This object will work with nested ULs or nested DIVs. Layout is done completely with CSS, xCollapsible only adds the display-toggle behavior.
xMenu5: Only one branch per level can be open. You can specify a submenu to auto-open onload. This object only works with nested ULs.
Level 4: Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Level 4: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Level 4: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Level 4: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Level 4: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Level 4: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
end 'xCollapsible - DIVs' demo
Just started experimenting with this one ;-). No changes to xCollapsible, just the CSS.
Experimenting with a second UL demo based on modified CSS from Marek's horizontal menu.
Improved overall. Added displayAll method. Added to this page's text and demo html.
I've been using a collapsible DIVs technique on my site for some time now but I had not written it as a separate object. Lots of people asked about it, so I finally started writing it as an object so it will be more reusable. Along the way I realized that the original xMenu5 would work for both nested ULs as well as nested DIVs. I changed the original xMenu5 into xCollapsible, and renamed xMenu6 to xMenu5.
A few more little improvements.
I played around with xMenu6 again. This time there is a +/- icon which opens/closes menus, so the label can be a link. You can specify one of the icons to auto-open onload. For now it's even more experimental than before ;-)
I completely changed the demo. It's getting much closer, but still experimental ;-)
The myMenu3 demo has been changed to support a request by Richard - only one 'branch' can be open at a time. I have some dirty hacks in there. Please don't use it yet - but I would appreciate any feedback.
myMenu4 shows what the menu looks like in 'downgrade' mode.
Added unload listeners.
There are three variations now: myMenu1 uses procedural code. myMenu2 uses object-oriented code. myMenu3 is the same as myMenu2 but has a feature requested by 91Stomperud - only one 'level 0' can be open at a time.
A quick experiment. (initial release)
Use the X function xWalkEleTree to replace the text of each label and item. Branch and Level are relative to the menu's topmost UL.
Use the X function xGetHtml to print the right column's html in the following textarea.
xMenu4 is a cascading mouseover menu built from nested ULs and can display horizontal or vertical.
By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.
Forum support is available at the X Library Support Forums.