Menus

In Intrexx, you'll find various menu types that allow you to display portal content in a structured way and access it easily. Menus are elements that you can access in the "Elements" section, just like any other layout element. Menus can be arranged in the layout within containers or in responsive grid columns.

If a layout already contains a menu, you'll usually find it in the upper-left corner of the "Layout" section under Container Header / Grid Header / "Menu" column. If you expand the structure up to that point, you'll see the drop-down menu there, and if it's selected, you can edit its element settings in the right-hand pane.

If you want to use a different menu, delete the existing menu in the "Layout" section using the "Delete" option in the context menu. You can then create the desired menu in the same location ("Menu Column"). To do this, simply use drag-and-drop by dragging the menu from the "Elements" section to this location in the layout structure.

Alternatively, the new menu can also be created using the "Insert Subelement / Menus" context menu in the "Layout" section under the "Menu" column.

Flat Menu

A flat menu can display only one level (arranged horizontally or vertically). The level at which the display begins depends on how it is linked to other menus, which you can configure in the element settings.

When you create a new flat menu by dragging it with the mouse from the "Elements" area into the layout structure, or when you double-click an existing flat menu, the Properties dialog box opens.

General

You can find all the information about general element settings here. Click "Next."

Arrangement

Horizontal / Vertical

These settings arrange the menu items horizontally or vertically.

Icon used as a separator between menu items

No separator

With this option, no separator is used between menu items.

Image

Displays the file name of the image.

Select an image

Opens a dialog box where you can select the image to be used as a separator between menu items.

Text

The text entered here will be used as a separator.

Click "Next."

Position and Size

You can find all the information about these settings here. Click "Next."

Menu - Background

You can find all the information about these settings here. Click "Next."

Menu - Menu Items

You can find all the information about these settings here. Click "Next."

Menu - Contents

You can find all the information about these settings here.

Element Settings

General

You can find all the information about these settings here.

Menu Contents

Content from the portal's menu structure

Select the menu structure from which the menu should be created.

Content from the parent menu item

Here you can select an existing menu item to which the flat menu will be linked. This menu controls the flat menu.

Submenu

Here, you can select an existing submenu that is controlled by the flat menu.

Separator between menu items

No separator

With this option, no separator is used between menu items.

Image

Displays the file name of the image.

Select an image

Opens a dialog box where you can select the image to be used as a separator between menu items.

Text

The text entered here will be used as a separator.

Vertical Menu

A vertical menu can be used when a space-saving layout of all menu items is desired, such as for display on mobile devices. This menu is responsive, meaning it automatically adapts to different screen sizes. The spacing between the start icon and the menu items can be adjusted using the "top" and "left" properties of the selector #Container_Menu_Dropline .menuopenclose.

You can find information about the element settings here.

When you create a new vertical menu by dragging it with the mouse from the "Elements" pane into the layout structure, or when you double-click an existing vertical menu, the Properties dialog box opens.

General

You can find all the information about general element settings here. Click "Next."

Position and Size

You can find all the information about these settings here. Click "Next."

Menu - Background

You can find all the information about these settings here. Click "Next."

Menu - Contents

You can find all the information about these settings here.

Element Settings

You can find all the information about general element settings here.

Menu Contents

Content from the portal's menu structure

Select the menu structure from which the menu should be created.

Content from the parent menu item

Here, you can select a parent menu—such as a flat menu —that provides the content for the child vertical, row, or block menu.

Add Application Menu

With this setting, pages that are integrated into the application menu can be accessed as submenu items, provided the user has the appropriate permissions.

Submenu

Here, you can select a submenu item that is then controlled by the vertical, row, or block menu.

More Options

Depth

Use this setting to specify how many levels should be displayed in the menu.

Open the menu when the mouse hovers over it

With this setting, the menu opens as soon as the mouse hovers over it, rather than only when you click.

Close the menu completely when the application link is clicked

Closes the entire menu when a menu item embedded in an application menu is clicked.

Close the open menu folder on the second click

If you click an open menu folder repeatedly, it will close.

Only one menu path can be open at a time

Menu paths that are not currently selected will be closed.

Only one menu container can be open at a time on the first level

Menu containers that are not currently selected on the first level are closed.

Highlight the selected menu item

Create an additional class called "selected," which can be styled as needed. The class can also be used for special events, for example.

Collapse the menu when a user clicks outside the menu

Closes the menu when you click an area of the screen that is not part of the menu.

When clicked, open the menu folder and the jump target

Opens the menu folder and the menu item's home page.

Take into account the functions of custommenu.js

Includes the custommenu.js file from the portal directory external/htmlroot/include/custom, in which additional JavaScript actions for menu clicks can be defined.

Row Menu

In the horizontal menu, the menu items from all levels are displayed horizontally. It can be used when a space-saving display of all menu items is desired, such as for viewing on mobile devices. This menu is responsive; that is, on a small screen, only the home icon is displayed, which can be clicked to open the menu items.

You can find information about the element settings here.

For more information about the features of this menu, see the description of the Vertical Menu.

Block Menu

A block menu displays the first menu level horizontally and all subsequent levels vertically. It can be used when a space-saving display of all menu items is desired, such as for viewing on mobile devices. This menu is responsive; that is, on a small screen, only the home icon is displayed, which can be clicked to open the menu items.

You can find information about the element settings here.

For more information about the features of this menu, see the description of the Vertical Menu.

Mega Menu

In the Mega Menu's element settings, you can specify the number of levels and whether to append the application menu. In principle, the structure of the mega menu is the same as that of the block menu. To that end, the following selectors have been added to the block menu:

 

Selector Block 1:

#Container_Menu_Droplist .menu .input:checked ~ .level0.list

#Container_Menu_Droplist .menu .input:checked ~ .level1.list

#Container_Menu_Droplist .menu .input:checked ~ .level2.list

#Container_Menu_Droplist .menu .input:checked ~ .level3.list

 

Selector Block 2:

#Container_Menu_Droplist .menu .input:not([checked]) ~ .level0.list

#Container_Menu_Droplist .menu .input:not([checked]) ~ .level1.list

#Container_Menu_Droplist .menu .input:not([checked]) ~ .level2.list

#Container_Menu_Droplist .menu .input:not([checked]) ~ .level3.list

Behavior is classified as follows.

 

Selector Block 1:

A menu level (0, 1, 2, or 3) that is open, i.e., The parent menu level was explicitly clicked.

 

Selector Block 2:

A menu level (0, 1, 2, or 3) in the closed state, i.e., the parent menu level has not been explicitly selected.

 

The selectors respond to the "ul" element on the respective level. This makes it possible to display and customize menu levels as desired, regardless of the status of the parent menu level (selected or not selected).

You can find information about the element settings here.

For more information about the features of this menu, see the description of the Vertical Menu.

Drop-down menu

A drop-down menu consists of a flat main menu that can be arranged vertically or horizontally. Submenu items are displayed in pop-outs. The dropdown menu is responsive and therefore automatically adapts to SMALL, MEDIUM, and LARGE screen sizes.

You can find information about the element settings here.

For more information about the features of this menu, see the description of the Vertical Menu.

Tree Menu

In the element settings of the tree menu, you can specify the number of levels and whether to include the application menu. The tree menu requires a responsive grid layout with a border on the right side. In this case, two containers should be placed side by side. The menu is placed in the left container, and the stage container is placed in the right one.

For complete information about the settings in this menu's Properties, see the description of the Vertical Menu.

A drop-down menu consists of a flat main menu that can be arranged vertically or horizontally. Submenu items are displayed in pop-outs. When you create a new drop-down menu by dragging it with the mouse from the "Elements" pane into the layout structure, or when you double-click an existing drop-down menu, the Properties dialog box opens.

General

You can find all the information about general element settings here. Click "Next."

Arrangement

Horizontal / Vertical

These settings arrange the menu items horizontally or vertically. Click "Next."

Position and Size

You can find all the information about these settings here. Click "Next."

Menu - Background

You can find all the information about these settings here. Click "Next."

Menu - Menu Items

You can find all the information about these settings here. Click "Next."

Menu - Background Popout

You can find all the information about these settings here. Click "Next."

Menu - Pop-out Menu Items

You can find all the information about these settings here. Click "Next."

Menu - Contents

Menu Contents

Portal Menu Structure

Select the menu structure you want here.

Parent menu item

If the current menu is not at the top of the portal but is intended to function in conjunction with another menu, this setting can be used to link it to another menu. Select the desired parent menu from the drop-down list.

Add Application Menu

For row menus, block menus, or vertical menus, you can also specify whether the application menu should be integrated.

Element Settings

Menu Contents

Content from the portal's menu structure

Select the menu structure from which the menu should be created.

Submenu

Here, you can select an existing submenu that is controlled by the drop-down menu.

More Options

Depth

Here you can set the depth of the drop-down menu. If a menu structure has, for example, 5 levels, you can have levels 1 and 2 displayed in the drop-down menu. A submenu that you can select here can then, for example, display the remaining three levels.

Image for the submenu featuring children

The image selected here will appear in the menu if there are submenu items. The file name of the selected image is displayed here.

Select an image

Opens a dialog box where you can select the image to be used as a separator between menu items.

Delete Image

Removes the reference to the image.

Tree Menu (Old)

A tree menu can display any number of levels. Where the display level begins depends on how it is linked to other menus. You can show or hide individual branches. When you create a new tree menu by dragging it with the mouse from the "Elements" area into the layout structure, or when you double-click an existing tree menu, the Properties dialog box opens.

General

You can find all the information about general element settings here. Click "Next."

Position and Size

You can find all the information about these settings here. Click "Next."

Menu - Background

You can find all the information about these settings here. Click "Next."

Menu - Menu Items

You can find all the information about these settings here. Click "Next."

Menu - Tree Menu

Tree Symbols

Preview

Here is a preview of the currently selected symbol scheme.

Symbol Scheme

Here you can select icons that will appear to the left of each menu item.

Custom

With this setting, no images are inserted.

Click "Next."

Menu - Contents

You can find all the information about these settings here.

Element Settings

General

You can find all the information about general settings here.

Menu Contents

Content from the portal's menu structure

Select the menu structure from which the menu should be created.

Content from the parent menu item

Here you can select an existing menu item to which the tree menu will be linked. This menu controls the tree menu.

Symbols

Here, you can assign images that represent the individual components of the menu. If you have selected an icon set in the tree menu properties, these images are already entered here. They can be replaced with your own graphics.

Select an image

Opens a dialog box where you can select the desired image.

More Information

Portal and Application Area