Pop-Up Menu

From Wiki openElement
Jump to: navigation, search
Path: Elements / Navigation / Pop-Up Menu



Contents

Description

A pop-up menu is an element that is displayed when the mouse cursor passes over a button or image, and then disappears. It can be configured in different ways.
Example:
Element-PopupMenu2.png

Add a Pop-Up Menu Element

First, select an element on the page on which this menu will pop-up (for example, a button link or an Image) and rename it.
Drag-and-Drop the element Pop-Up Menu from the elements menu anywhere on the page.
This will automatically open the element's configuration form.

Configuration

NOTE: When editing, the 'pop-up menu' element is not visible on the page. A drop-down will appear in the bar at the top of the page. (See article: Configure a Hidden Element).

Main Configuration

Step 1:
Element-PopupMenu3.png

  • (1) The Attached Element: This is the element next to which the menu will pop up.
  • (2) The Trigger: The event that causes the menu to pop-up:
    • When the mouse cursor passes (hovers) over the triggering element or when it is clicked. This option is recommended for the site to be accessible on tablets and smartphones..
    • When the mouse cursor hovers over the triggering element.
    • When the triggering element is clicked.
    • When the triggering element is double-clicked.
  • (3) The Triggering Element: This is the element on which the event (trigger) occurs. Unless otherwise specified, this will be the same as the Attached Element.


Step 2:
Element-PopupMenu4.png

  • 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

  • X Offset: See Figure 1
    Figure 1
    X and Y Offset
  • Y Offset: See Figure 1
  • Sub-menu Spacing: See Figure 2
    Figure 2
    Spacing of sub-menus
  • Position: See Figure 3
    Figure 3
    Position
  • Close Delay: Delay between when the menu first pops-up and when it disappears (in milliseconds)
  • Close Speed: Speed at which the menu closes (fast or slow)
  • Open Speed: Speed at which the menu opens (fast or slow)


Properties Default Value

X Offset

0

Y Offset

0

Sub-Menu Spacing

3

Position

Top Right

Close Delay

200

Close Speed

Fast

Open Speed

Fast

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)

See article: How to Modify the Styles of a Pop-Up Menu

Element-PopupMenu8.png

WEMenu WEMenuGroup.png Frame :
Default Values:
Background Color: #FFFFFF (white)
Border: 1px solid Gray
Width: 180px
Display: None (managed by the display script)

WEMenu WEMenuItem.png Rows :
Default Values:
Outer Margins: 3px 3px 3px 3px
Inner Margins: 2px 2px 2px 2px

WEMenu WEMenuItemTable.png : Content of Rows (table) :
Default Values:
Width: 100%

WEMenu WEMenuTop.png First Row: No style by default

WEMenu WEMenuBottom.png Last Row: No style by default

WEMenu WEMenuText.png Text: No style by default

WEMenu WEMenuSeparator.png Separator :
Default Values:
Background Color: #C0C0C0 (light gray)
Height: 1px
Width: auto
Outer Margins: 0px 5px 0px 5px

WEMenu WEMenuIcon.png Icons : No style by default

WEMenu WEMenuSubIcon.png Arrows :
Default Values:
Background Image: Image (16px/16px)
Width: 18px
Minimum Width: 18px

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox