Official Content

This document is focused to guide you on how to display a menu in a responsive application.

In a RWD, wide screens have plenty of space to display a menu, and that's why it is shown on the left or right side of the web page. However, in small screens (like phone screens) the contents of the web page and the menu may not be appropriate to be displayed together.

So, in the case of extra small screens (<768px), by using a button or an image the user can make the menu appear smoothly on one side of the screen, overlapping with what is shown in the page. After selecting a menu option, the menu disappears, and the page shows the information according to the user's selection.

The button to make the menu appear is the same button used to make it disappear from the screen.

In the GeneXus Web Laboratory example, the menu is shown on the left side of the screen; in the case of wide screens:

Wide Screen Page with left menu

When the web page is displayed in cell phone screens, there is a button in the top right corner of the screen for the user to call the menu.

Phone Screen Page Toggle button

When the user clicks on the button, the menu appears on the left, overlapping with the contents of the page:

Phone Screen Page with overlapping menu

The Work With for Web pattern generates this solution for the case of work with objects that have many filter options.
The same happens with default prompts that have filters and ordering conditions.

Light CRM WW Meetings Wide Screen

Light CRM WW Meetings in Wide Screens.

Light CRM WW Meetings Phone Screen

Light CRM WW Meetings in phone screens.

Implementation of the solution

The following example is an automatically generated prompt for the Meeting Transaction of the LightCRM Knowledge Base.

The Abstract Layout of the prompt is shown in the picture below.

Meeting WW abstract layout

Note that:

1. The Responsive Table is called "FiltersContainer" on the right side contains the different filters for the selection list.
The FiltersContainer table is going to be shown by default only for small screen devices and bigger (>=768px), not for extra small screen devices (like phones).

In the case of phones, the user will have the "Toggle" button to press and make the FltersContainer table appear.

Meeting WW abstract layout - toogle

Abstract Layout prompt: properties of the Toggle button

So, the toggle button is visible only for extra small screens.
The following pictures show how the Responsive Sizes property is configured to achieve the desired behavior.

Meeting WW abstract layout - toogle - visible

Abstract Layout prompt: Responsive table for phone screens

Meeting WW abstract layout - toogle - not visible

Abstract Layout prompt: Responsive table for small and bigger screens

2. The following code is associated with "Toggle" on click event:

Event 'Toggle'
    if FiltersContainer.Class = StyleClass:filters-container
        FiltersContainer.Class = StyleClass:filters-container + !" " + StyleClass:filters-container--visible
        GridCell.Class = StyleClass:ww__grid-cell + " col-xs-12 col-sm-9 col-md-10"
        BtnToggle.Class = StyleClass:ww__button-filters--hide
        BtnToggle.Caption = "Hide Filters"
        BtnToggle.TooltipText = "Hide Filters"
    else
        FiltersContainer.Class = StyleClass:filters-container
        GridCell.Class = StyleClass:ww__grid-cell--expanded + " col-xs-12 col-sm-3 col-md-2"
        BtnToggle.Class = StyleClass:ww__button-filters--show
        BtnToggle.Caption = "Show Filters"
        BtnToggle.TooltipText = "Show Filters"
    endif
EndEvent

When the Toggle button class is FiltersContainer, the FiltersContainerVisible Class is added to the list of classes of the FiltersContainer table.

On the contrary, when the class is FiltersContainerVisible, the FiltersContainer class is associated with it.

The effect is that the table appears and disappears when the button is clicked.

The FiltersContainerVisible and FiltersContainer classes are predefined classes, descendants of the Table class.

Basically, the FiltersContainerVisible and FiltersContainer class properties are as follows:

.FiltersContainerVisible {
      display: inherit;
}
.filters-container, .filters-container--visible {
         visibility: hidden;
         opacity: 0;
         padding-left: 20px;
         padding-right: 20px;
         position: absolute;
         right: -15px;
         background-color: $colors.surface;
         width: 100%;
}

.FiltersContainer {
    display: none;
    background: $colors.surface;
    padding: $spacing.inset-m;
    border: solid $borders.extra-small;
    box-shadow: $shadows.m;
}

Additionally, the FiltersContainer responsive table has the Cell Class property set to ".PromptAdvancedBarCell", which is a class with the following settings:

.PromptAdvancedBarCell {
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: $colors.gray01;
}

Note:

  • For a customized example, it may be necessary to adjust the settings of the left property, and the z-Index CSS property of the FiltersContainerVisible class.
  • The CSS transition is defined as a Custom property.

Download sample

The LightCRM is a sample KB where you can find the WW pattern applied to all the web transactions, and the prompts that have filters and ordering conditions are examples where the menu displays differently depending on the screen size.

See Also

Look and feel of responsive web applications
Action Group Control for the Web
Responsive Web Applications

Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant