Accordion Menu

From Wiki openElement
Jump to: navigation, search
Path: Elements / Navigation / Accordion Menu



This element is a menu with levels that expand and collapse like an accordion.

Element menuAccordion1.png

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

Other Properties

  • 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.

Properties Default Value

Open Delay




Automatic Size


Design and Presets

There are numerous style presets available for this element in the Cloud Library. Presets can be accessed through the Elements and Styles Menu, under the Styles tab, in Style Presets.

To change its appearance, users must override the element's various style zones.

Style Zones (Expert)

Element menuAccordion3.png

WEMenuAccordion FirstTitle.png Menu Items:
Background Color: 238; 236; 225
Outer Margins: 0px 0px 0px 0px
Inner Margins: 2px 0px 2px 2px
Font Size: 14px

WEMenuAccordion FirstTitleSelect.png Selected Menu Items:
Background Color: 216; 209; 184

WEMenuAccordion Box.png Sub-Menu Container:
Outer Margins: 0px 0px 0px 0px
Overflow: Hide

WEMenuAccordion Line.png Sub-Menus:
Outer Margins: 0px 0px 0px 0px
Font Size: 12px

WEMenuAccordion Separator.png Menu Item Separators: No style by default

WEMenuAccordion SeparatorSubMenu.png Sub-Menu Separators: No style by default

WEMenuAccordion Icon.png Icons:
Borders: invisible
Inner Margins: 0px 2px 0px 0px
Vertical Alignment: Middle

WEMenuAccordion Top.png First Row of Accordion Menu: No style by default

WEMenuAccordion Bottom.png Last Line of Accordion Menu: No style by default

WEMenuAccordion Box2.png Menu Container for Levels >2
Inner Margins: 0px 0px 0px 15px
Outer Margins: 0px 0px 0px 0px

Personal tools