A test page to see if I can get ypSlideOutMenus(youngpup.net) working with a HTML unordered list. The drop-down menus should dynamically resize to accomodate more/fewer items (NB. this only works in browsers that understand offsetHeight and offsetWidth). Menu widths are set in ems, so it should be okay with enlarging/reducing the font size in IE too. Only tested in IE6 and Opera 7 on Windows so far. Only the up and left menus work properly at the moment, with the text flying on as the menu opens.
Update: The sliding behaviour seems to be working properly now, and I've sort of got a second nested list working as a submenu, but only if I set a border on ul.menu li. Anyone know why? I'm probably missing something obvious.
Another update: IE5 has some sort of weird text-indent thing going on that I can't track down. Mozilla/Firefox blinks when the menu changes from overflow:hidden (closed or changing state) to overflow:visible (fully open) - to see this, set the nestedMenus flag near the top of the script. That's only required so that second level menus can appear outside of their parent. For the time being, it defaults to not showing menus within menus. OffsetHeight and offsetWidth seem to be slightly different (a couple of pixels or so) in different browsers. I'd guess this is caused by some including the border, others just the content.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus posuere, wisi eu dapibus pharetra, eros ipsum fringilla lorem, non porta arcu mi sed urna. Fusce iaculis. Ut iaculis, tortor nec scelerisque scelerisque, dolor velit lobortis sapien, sit amet varius turpis justo vel erat. Donec ut urna id massa euismod nonummy. Aenean hendrerit, neque sit amet fermentum sodales, lacus velit dapibus nulla, et commodo est ipsum a sem. Curabitur nonummy fermentum quam. Proin vel odio. Integer sem. Aenean dictum, tellus eget tristique dictum, nunc nulla suscipit neque, eget ultrices augue leo ut tortor. Pellentesque sit amet velit quis elit cursus consequat. Quisque sem. Aenean vitae neque. Suspendisse adipiscing. Sed in justo ac est dignissim venenatis. Vestibulum at diam in wisi luctus tincidunt.
Curabitur vitae lorem at massa vehicula pharetra. Cras enim odio, pellentesque at, convallis accumsan, convallis sed, urna. Morbi faucibus, neque et dapibus tincidunt, quam turpis congue turpis, eget dapibus magna velit a arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla sit amet risus a dolor ultricies euismod. Donec tellus lorem, pretium eget, tincidunt id, mattis eget, leo. Duis eu libero. Mauris risus neque, feugiat a, dignissim eu, ornare at, nibh. Nulla lorem erat, iaculis ut, suscipit ut, malesuada eu, nunc. Ut egestas, augue ac elementum rutrum, quam est imperdiet velit, in vehicula dui nibh pellentesque elit.
Here's a definition list. Here MenuContainer doesn't contain MenuContent. Might need to change some ids and variable names to make this clearer.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus posuere, wisi eu dapibus pharetra, eros ipsum fringilla lorem, non porta arcu mi sed urna. Fusce iaculis. Ut iaculis, tortor nec scelerisque scelerisque, dolor velit lobortis sapien, sit amet varius turpis justo vel erat. Donec ut urna id massa euismod nonummy. Aenean hendrerit, neque sit amet fermentum sodales, lacus velit dapibus nulla, et commodo est ipsum a sem. Curabitur nonummy fermentum quam. Proin vel odio. Integer sem. Aenean dictum, tellus eget tristique dictum, nunc nulla suscipit neque, eget ultrices augue leo ut tortor. Pellentesque sit amet velit quis elit cursus consequat. Quisque sem. Aenean vitae neque. Suspendisse adipiscing. Sed in justo ac est dignissim venenatis. Vestibulum at diam in wisi luctus tincidunt.
Here's some old-style ypSlidingMenus HTML, to test for compatibility. Seems to work, but positioning has changed (container styles are now set in the document stylesheet, not in the javascript) and the script has to go after the menu html for the new CSS-writing functions to work. That could be fixed by attaching everything to a window.onLoad event, I think.