Advanced Techniques - Button tab menu

1. General

In addition to the tab menu, which can be defined in the properties dialog of a page to collate multiple pages, you can create a tab menu on a page using buttons to display contact data clearly - like in our example application. With this approach, actions (such as saving the data) can also be performed when the user clicks on one of the tabs.

2. Example application

You can download the example application here and then import it as usual.

3. Edit page




Contact data can be entered on the edit page.

4. View pages





The "Private", "Office", "Telephone" and "Online" view pages are loaded via the buttons shown in the image above. The tab menu can be created on one of the view pages and then copied to the other pages. It is important to switch the buttons' type to text. So that the buttons are displayed as tabs in the browser later, they need to be positioned one beneath the other; otherwise they will be displayed in one tab.



The buttons need to be grouped together in a transparent grouping. On the Options tab in the properties dialog of the grouping, the HTML element needs to be set to "Unordered list".



The style class "TAB_MENU" is then assigned on the Style tab.



The custom modification "padding-left:0;" is now required; this is created as a CSS rule. With this, the tab menu will not be displayed center-aligned but left-aligned. The groupiing can now be copied to other view pages.



To make it easier for the users to know where they are, adjusting the style class for the current tab can be helpful. This is done by making them bold with the style class "Link_Strong". Now the user sees which page they are on at a glance.



The result is very similar to the classic tab menu but is positioned in the middle of the page.