Accordion Menu
A lot of this morning was spent searching the W3 for a particular kind of menu which uses the Accordion Menu script. I finally came cross a site that had potential: http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm. Having trawled through lots of other sites which mostly confused me, I had little hope. But DynamicDrive.com did have the answer: its bullet list accordion menu was just what I needed. Having checked the other four menus (just in case they were even better than the menu I had envisaged) and deciding that the bullet list was the right menu for me, I started creating my very own bullet list accordion menu.
In this menu, the menu headers are H3 tags, with each sub menu being UL tags that expand and contract. A CSS class gets dynamically added to a header when it’s expanded to style the expanded header. The headers are toggled via a “click” of the mouse, and all headers can be collapsed. The previous expanded header (if any) is closed before expanding the current. Clever, eh? Not only that, in case I ever wanted the menus to drop down on a mouseover, they explain clearly how to do that too.
You can see my efforts here: http://www.abraxor.com/demo/dropdowns/dropdown.html.
Tweet