Menus

There are different menu types in Intrexx that allow portal content to be displayed in a structured manner and easily accessed. Menus are elements that you can access, like all other layout elements, in the "Elements" area. Menus can be arranged in containers or in responsive grid columns in the layout.

If you create a new portal with the default portal template "New portal", you will find the published layout "Desktop" in the "Design" module. This already contains a menu. You can find it in the upper left corner of the "Layout" area under Container header / Grid header / Column menu. If you open the structure to that point, you will see the clickdown menu there and, if it is selected, you can edit its element settings.

If you want to use a different menu, delete the existing menu in the "Layout" area by choosing "Delete" from the context menu. Then the desired menu can be created again in the same place ("Menu column"). To do this, simply drag and drop the menu from the Elements panel to this location in the layout structure.

Alternatively, the new menu can also be created via the context menu "Insert subelement / Menus" in the "Layout" area in the Menu column.

Flat menu

A flat menu can only show one level (arranged horizontally or vertically). On which level the display begins depends on how it is linked to other menus. This is defined in the element settings.

Vertical menu

A vertical menu can be implemented if you require a menu item presentation that saves space, e.g. for mobile devices. This menu type behaves responsively meaning that it adjusts itself accordingly to the various display sizes. The distance between the Start symbol and the menu items can be specified using the "top" and "left" properties of the #Container_Menu_Dropline .menuopenclose selector. Information about the element settings can be found here.

Row menu

In the Row menu, the menu items of all levels are depicted horizontally in the same format. It can be implemented if you require a menu item presentation that saves space, e.g. for mobile devices. This menu type behaves responsively, this means that simply the Start symbol is shown in smaller display sizes. The menu items can be opened by clicking on that link. Information about the element settings can be found here.

Block menu

In the Block menu, the menu items of the first level are depicted horizontally, the rest are depicted vertically. It can be implemented if you require a menu item presentation that saves space, e.g. for mobile devices. This menu type behaves responsively, this means that simply the Start symbol is shown in smaller display sizes. The menu items can be opened by clicking on that link. Information about the element settings can be found here.

Mega menu

In the element settings of the mega menu, you can define the number of levels and also how the application menu is appended. In principle, the structure of the mega menu corresponds to the structure of the block menu. The following selectors have been added to the block menu for this purpose:

 

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

The behavior in this case differs as follows.

 

Selector block 1:

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

 

Selector block 2:

A menu level (0, 1, 2 or 3) when it is closed, meaning the menu level above was not specifically selected.

 

The selectors respond to the "ul" of the respective level. This makes it possible to display and style menu levels as desired, regardless of the status of the parent menu level (clicked / unclicked).

Drop-down menu

A drop-down menu consists of a flat main menu (arranged horizontally or vertically) and popouts that contain the subordinate menu items. Click here for more information about the element settings. The drop-down menu is responsive and therefore automatically adapts to SMALL, MEDIUM and LARGE screen sizes.

Tree menu

In the element settings of the tree menu, you can define the number of levels and also how the application menu is appended. For the tree menu, a responsive grid layout with a border in the right area is needed. In this case, two containers should be placed next to each other. The menu is placed in the left container and the stage container in the right one. You can choose any width for the containers. The following describes how to integrate a tree menu in the default desktop layout.

In the "Layout" area you will find the Grid header in the Container header. Open the properties dialog here by double-clicking and click on "Next".

Select the "Menu column". Delete the entry by clicking on "Delete" and confirm the change by clicking on "OK".

Then open the properties dialog of "Grid stage" in the Layout area by double-clicking on it. Switch to the "M" screen size. Then click on "Add" and name the new container "Column menu". Then move the new container to the first position in the list by clicking on "Move up". Deactivate the "Padding left" setting. Change the width to 4 and the width of the "Stage" column to 8.

Then switch to the "L" screen size. Deactivate the "Padding left" setting here as well. Change the width to 3 and the width of the "Stage" column to 9.

Now the tree menu can be added to the "Menu" column via the context menu "Insert subelement / Menus / Tree menu". The properties dialog will open automatically. Here the configuration can be edited if necessary. Click on "Next" in the properties dialog until you can finish the creation of the new menu on the last page by clicking on "OK".

The tree menu has now been created in the layout.

Now, the CSS properties of "Grid stage" need to be adjusted for all screen sizes. Select "Grid stage" in the "Layout" area. You can now find the element settings in the right pane.

There, click on "Styles" in the lower right corner and then on "Show CSS properties in editor". At the top right, you can switch between screen sizes S, M and L. Enter the following CSS here in each case:

Display size S

#Grid_Stage
{
    max-width: 99%;
    margin: 0 auto 100px;
}

Display size M

#Grid_Stage
{
    max-width: 95%;
    margin: 0 auto 80px;
}

Display size L

#Grid_Stage
{
    max-width: 75%;
}

This completes the configuration of the layout for the tree menu. The layout can now be saved and published.

A drop-down menu consists of a flat main menu (arranged horizontally or vertically) and popouts that contain the subordinate menu items. Click here for more information about the element settings.

Tree menu (old)

A tree menu can display any number of levels. Where the level of display begins depends on how the menu is linked to additional menus. The individual branches can be shown or hidden. The background, borders and margins of the total area of the tree menu can be defined in the properties dialog. The design of the area, where the menu items are presented, and the layout of the menu items can also be defined on the corresponding page in the properties dialog. Click here for more information about the element settings.