This element is a menu with levels that expand and collapse like an accordion.
Add an Accordion Menu Element
Drag-and-Drop the element Accordion Menu from the elements menu anywhere on the page.
The configuration form will open automatically.
Caution: Users should avoid having more than two tiers or levels in an accordion menu as it may cause display issues. This element is optimal when each category reveals a single section of links or text.
Note: The Accordion Menu's main configuration is the same as the Pop-Up Menu.
- Clicking on a row selects it.
- Double-clicking on a row allows users to modify it.
- Selecting a row, then pressing Delete on the keyboard, deletes it.
- Dragging and dropping the rows moves them in the tree hierarchy
- (1) Add a Link
- (2) Add a Separator: A separator shows up as "-----" in the list, but will be displayed as a real separator in the menu itself (as long as the graphic style for separators is defined either as a preset or custom style).
- (3) Properties: Opens the properties for the selected row
- (4) Delete: Deletes the selected row
- Open Delay: The length of time (in milliseconds) it takes for a menu item to expand.
- Event: The mouse cursor event that triggers the menu to expand:
- Over: The mouse cursor passes (hovers) over the parent menu.
- Click: The parent menu is clicked (This option is recommended if there are links in the menu, or when optimizing for tablets).
- Automatic Size: The accordion menu will keep the same height no matter which menu item is open.
Design and Presets
To change its appearance, users must override the element's various style zones.