How to Add a Tab Menu with the Tab Generator
Tutorial

How to Add a Tab Menu with the Tab Generator

A tab menu can easily be added to your pages on your MemberGate site without needing to use (or know!) jquery or other difficult web coding.

The instructions to add the tab menu to your page can be found below. Click each point to expand the section for more graphics and more specific steps.

1. Under 'Tools' Select 'Tab Generator'

 Under 'Tools' Select 'Tab Generator'

 

Tab Generator
2. In the 'Tab Name' field, enter a name, and Set the 'Status' field to 'Active'

In the 'Tab Name' field, enter a name, and Set the 'Status' field to 'Active'

 

Tab Name: The tab name is for internal purposes only. It will not be shown on your pages. 

Status: A status of 'active' means the tab menu will show on your pages. A status of 'inactive' means the tab menu will not be displayed on your pages.

3. Update the Settings for the 'Collapsible' and 'Collapsed' fields

Update the Settings for the 'Collapsible' and 'Collapsed' fields

 

One section can be revealed by default or all of the fields can be hidden.

Both the Collapsible and the Collapsed fields can be set as 'yes' or 'no'. 

Collapsible: If all of the fields can be hidden, select 'Yes' from the drop down box. 

Collapsed: If all of the fields should be hidden upon loading, select 'Yes'. If the default field should be revealed (or active), select 'No'

4. Set the Colors for the Fonts and Backgrounds

Set the Colors for the Fonts and Backgrounds

 

The fonts and background colors can be changed as needed. There can be a different font color for open (active) tabs and a different color for open (active) background colors.

Enter a hexadecimal colors for the font and background colors in the appropriate fields. 

 

Sample Tab Menu and the Sections that can be Edited

5. Under the 'Tab Content' section:

Under the 'Tab Content' section:

 

A. Enter the title that will appear in the Header of the Section

B. Click the radio button if this section will be the default open area when the accordion is loaded

C. Set the status of the section to 'active' if this section should be shown along with the accordion. Set the status to 'inactive' if this section should not be shown along with the accordion.

6. Enter the Content that will Show in an Active Section into the WYSIWYG main text box

Enter the Content that will Show in an Active Section into the WYSIWYG main text box

 

7. Click the '+ Add Section' Button to Add another Header/Section area

Click the '+ Add Section' Button to Add another Tab/Section area

 

8. Repeat Steps 5-7 for Each New Section

Repeat Steps 6-8 for Each New Section

 

9. Rearrange Each Section if Needed

Rearrange Each Section if Needed

 

If you have put your tab menu together and then decided that the order of the sections is incorrect, there is an easy way using a drag and drop method to rearrange the sections.

 - In the edit tab screen, hover over the tab area of the section until the cursor turns to a hand. 

 

 - Click your mouse and the whole section is now movable. Drag the tab section tp where you would like it moved.

 

 - Unclick Your Mouse

10. Press the 'Save Tab' Button When Completed

Press the 'Save Tab' Button When Completed

 

11. Copy the CF tag found on the Tab Preview Page

Copy the CF tag found on the Tab Preview Page

 

12. Paste the CF tag into the main text box where the Tab Menu should appear

Paste the CF tag into the main text box where the tab menu should appear

 

The CF tag can be pasted into the text box in 'add or edit content' to show it on a content page, 'add or edit department' to show it on a department page, or 'edit public or member portal' to show it on the portal pages.

13. The Tab Menu Will Appear on your Page

The Tab Menu Will Appear on your Page