Popup Menus

Logi Info includes elements that allow developers to display pop-up menus, offering action choices to the user. Each choice can be custom-defined, with its appearance controlled using style classes, and can have a specific action assigned to it. This topic discusses the use of these elements.

 

About Popup Menus

Two elements, Action.Popup Menu and Popup Option, produce the desired pop-up menu when a related link is clicked.  

The elements used to create pop-up menus are shown, above left. The Action.Popup Menu element can be used beneath a number of elements, including Labels and Images. In this example, the Label element is a child of a Rectangle shape element, to give it some borders.

One or more Popup Option elements are used beneath the Action.Popup Menu element. These are the individual items that will appear in the pop-up menu. The Popup Option element's attributes include an ID, which must be set, and a Caption which defines what text will appear in the pop-up menu item. The Condition attribute allows the display of individual items to be dynamic.

Another Action element is added beneath each Popup Option, defining what action will occur when the pop-up menu item is clicked. Link Parameters can be added, if desired, to pass values to the target.

You can even add an Action.Popup Menu element beneath a Popup Option element, so that selecting a menu item will display a sub-menu.

In the center example above, the elements have been given IDs that make their purpose a little clearer and, finally, the resulting menu is shown, above right. This is the basic arrangement for producing pop-up menus and redirecting the user to another report page or a process based on their pop-up menu selection. The pop-up menu only appears when the File link is clicked.
 

Other Menu Variants

Logi Info also includes other menu elements you may wish to investigate; they may be more useful depending on the nature of your application. The ReportCenter Menu is useful for displaying a menu based on the available reports and the Menu Tree menu (see Menu Tree Menus), introduced in v12.1, can be used to create horizontal and vertical hierarchical menus.

 

Adding an Image to the Pop-up Options

The menu item text that appears in the pop-up menu can be accompanied by an image.
 


The examples above show a menu with and without the images. To include an image, you need to configure the Popup Option element differently:
 

Instead of using the Popup Options element's Caption attribute to set the text that will be displayed, leave it blank and then add an Image and a Label element, as shown above, as child elements. The Action element remains a child of the Popup Option element, rather than of the Image or Label.  

 

Using the onMouseOver Event

You can make the pop-up menu appear when the mouse is hovered over the main menu link or image, which saves a mouse click:
 

By introducing an Event Handler element between the main menu Label and the Action.Popup elements, as shown above, and setting its DHTML Event attribute to onMouseOver, you can cause the pop-up to appear when the mouse passes over the label, so clicking the link is not necessary.

 

Controlling Pop-up Location

The Action.Popup Menu element's Popup Location attribute controls where the pop-up menu will appear:

This allows the pop-up menu to be used with either a horizontal and vertical main menu. The Left pop-up menu example, shown above left, places it directly below and left-aligned with its parent link. The Right example places the pop-up menu beside it to the right and top-aligned with its parent link.  

The Popup Location attribute is shown above and its default value is Left. 

 

Controlling Pop-up Appearance

Pop-up appearance is controlled using style sheet classes. Main menu items (typically Label elements) can be assigned classes of your own design using the style sheet that's part of your Logi application. A separate existing style sheet controls the appearance of the pop-up menu but you can override the classes in that style sheet by adding the same classes to your application's style sheet. Here's an example:
 

/* menu item text color and decoration - normal */
.rdPopupMenu A:link {  
    text-decoration: none;
    color: #555555;
}

/* menu item text color and decorations - after 1st click */
.rdPopupMenu A:visited {  
    text-decoration: none;
    color: #555555;
}

/* background color or pop-up menu */
.rdPopupMenu {  
    background-color:white;
}

/* background color, etc. for selected item */
.yuimenubaritemlabel-selected, .yuimenuitemlabel-selected, .yuimenubaritem-selected, .yuimenuitem-selected {
    background-color:#E0E0E0;
}
/* pop-up menu item text */
.yuimenuitemlabel {  
    font-size:100%;
}