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

Bullet List Accordion Menu

In this menu example, the menu headers are H3 tags, with each sub menu being UL tags that expand/ contract. A CSS class gets dynamically added to a header when it's expanded to style the expanded header. The headers are toggled via "click" of the mouse, and all headers can be collapsed. The previous expanded header (if any) is closed before expanding the current.

Required external file (right click, and select "Save As"):

  1. ddaccordion.js

Full HTML Source:

Select All

The menu uses three 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.

Bullet List Accordion Menu with nested levels

The same menu as above, but this one illustrates how you would add a collapsible second level.

The key is creating a nested accordion menu is to treat each level of category headers as a new instance of Accordion Content script, so the 2nd nested level in this case ("CSS Drive") would be a new instance.

Full HTML Source:

Select All

The menu also uses three images for the purpose of styling the menu (download by right clicking, and select "Save As"):


Table Of Contents