New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


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"):

  1. ddaccordion.js

Full HTML Source:

Select All

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