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.
- Expand 1st header within menu above through a URL parameter
- Expand 3rd header within menu above through a URL parameter
Required external file (right click, and select "Save As"):
Full HTML Source:
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.
- Expand 1st header within menu above through a URL parameter
- Expand 2nd header within first level headers above and 1st header within nested 2nd level headers
Full HTML Source:
The menu also uses three images for the purpose of styling the menu (download by right clicking, and select "Save As"):
Table Of Contents