COMPANY
COMMUNITY
BLOG
HELP
MY ACCOUNT
EN PT ES

Imagen6568E

How to Configure Drop-Down Menus with GXPortal

In this issue we'll explain how to configure the GXPortlet "Menu" so the options containing a menu are dropped down when the user rolls the mouse over the option or clicks on it.

In order to make navigation easier through the different pages of a portal, links are often arranged in a tree structure, enabling users to navigate through the options until they find what they were looking for.

GXPortal offers the possibility of configuring the GXPortlet "Menu" so the options containing a menu are dropped down when the user rolls the mouse over the option or clicks on it. In the example shown in the image below, the user clicked on the option "Product" and then moved the mouse pointer over the option "Documentation".

These are the configuration steps to be followed:

1. Assign a sub-menu to a menu option.

a. Go to the "Design administrator and navigation to Menus" option

b. On the menu containing the option where the sub-menu will be dropped down, press the "Options?" button

c. Clicking on that button brings up the screen where the menu options are edited. From that screen press the "Update" button on the option where the menu will be assigned.

d. In "Option Type ", select the value "Menu" as shown in the following figure. The = button will appear on the right side of this field. This enables you to select the menu to be dropped down.

2. How to configure the GXPortlet "Menu" to drop-down the sub-menus.

a. From the design view of the page containing the menu to be configured as drop-down when the mouse rolls over it, click on the button  to go to the properties of the GXPortlet "Menu."

b. In the menu properties screen, select the group of properties "Submenus". For example, if you want to configure a menu located in the left column of the page and you want the sub-menus to be dropped down on the right of each option, the following properties should be configured:

i. Number of menu levels: this specifies how many levels to show, up to a maximum of five.

ii. Display relative to the option: this marks the position where the sub-menu will be dropped down in relation to the menu option.

iii. Horizontal and vertical position: this specifies the position in which the sub-menu will appear.

iv. Format: this sets whether the sub-menu will be of images or text.

v. Display submenus of: this indicates whether the sub-menus of all options will be displayed, or only the one selected. In this case the "Selected option" value should be chosen.

vi. Display mode of the submenu: in this case the "Display popup when mouse over" value should be chosen.

vii. Menu alignment: this specifies if the sub-menu options will appear horizontally or vertically.

viii. Submenu location: this specifies whether the sub-menu will be displayed on the right or left of the option.

c. There are three groups of properties to configure the attributes of the options: Submenus- Options, Submenus-Opt. when mouse over, Submenus ? Selected option.

3. Apply effects to the sub-menus.

a. In the uppermost image you can see two properties to apply effects to the sub-menu displayed. The "Display effect" property has a couple of effects that can be applied when displaying the sub-menu.

b. The "Display filter" property configures a filter in the visualization of the sub-menus. These filters can be obtained at http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

c. The call for the filter functions that will be applied must be copied in this property. This is how they should look: progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=0.5)

d. The name and parameters of the functions may vary according to the filter to be applied. Note that these effects are only compatible with the Internet Explorer browser.

GXPortal Team
http://www.gxportal.com

 

 

 

 

Related
GXPortal: Installation Backup and Recovery
GXPortal: Playing Multimedia Files on Opening a Page
How to Configure the GXPortal Search Tools
Adding Content to a Web Page from the Designer