Apple style Accordion Menu
This menu mimics the look of the vertical menu found on certain areas of
Apple.com. The headers are toggled via "mouseover
"
over each one (after 200 millisec delay), and the previous expanded header (if any) is closed before
expanding the current. One header is forced to remain open at any time, by
setting the parameter onemustopen: true
. Note that this menu
requires v1.5 or newer of the ddaccordion.js file
to work. Menu structure wise, the menu consists simply of DIV tags instead of
the typical UL
and LI
elements found in a standard
menu. This structure makes it easy to include arbitrary HTML as the sub menu
contents.
Tip:
When setting up an Accordion Content to be toggled via "mouseover
",
give all the sub contents a common height instead of letting the contents inside
dictate each one's height. This ensures the best user experience.
Required external file (right click, and select "Save As"):
Full HTML Source:
The menu uses two images for the purpose of styling the menu (download by right clicking, and select "Save As"):
See the frontpage of Accordion Content script for a full explanation of each setting inside the script.
Table Of Contents