Glossy Accordion Menu
In this example, the menu headers are A
tags, with each sub menu
being DIV
tags that expand/ contract. The use of DIV
tags for the sub menus is to facilitate content other than UL
lists.
An absolutely positioned icon image gets dynamically added to each header that
changes depending on the header state. 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"):
Entire HTML Source code:
The menu uses four 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.
Glossy Accordion Menu with responsive headers
Same menu as above, except this one also uses the oninit()
and
onopenclose()
event handlers to run custom code when the menu has
finished loading, plus when a header is expanded/contracted due to user
initiated action per the config.revealtype
setting, respectively. See Taking advantage of the oninit()
and onopenclose() event handlers for details.
Entire HTML Source code:
The menu uses four images for the purpose of styling the menu (download by right clicking, and select "Save As"):
Table Of Contents