TERMINALFOUR (T4) Tip 8: Link Sections and the Hamburger Menu

Intended Audience:

TERMINALFOUR WEB MAINTAINERS, END-USER MODERATORS, PRIMARY WEB COORDINATORS, and VERSION 3  TEMPLATE USERS WHO HAVE A HAMBURGER MENU

TIP: Link Sections allow you to create sections that contain no content, but merely link to another location (e.g., other pages, sites, or applications).

Explanation:

Link Sections allow you to make landing page content visible on  hamburger flyout menus. Without a link section – the landing page content would be hidden since clicking the main level link triggers the flyout menu.

Creating Link Sections

Link sections are links that point to another section or external website link. They are useful for hamburger menus.

Extension hamburger menu circled

Adding a Flyout to Your Hamburger Menu

After the main level topic is clicked, the secondary menu will have a flyout submenu. Be aware that nesting causes the information on the main topic page to become invisible. In the example below, the information on the 4H page cannot be viewed once it is clicked.

Extension Hamburger Menu with 4-H circled

After 4H is clicked, 4-H Clubs is the only visible page link.

Extension Hamburger 4-H Clubs circled

In the T4 site structure, 4-H Clubs is the only nested page that can show up in the hamburger flyout menu.

4-H Clubs T4 section circled

The 4H page information needs to be accessible from the hamburger flyout menu. To do this, we need to make a link section.

Creating a Link Section While Linking to a T4 Section

Start at the site structure. To get to the site structure, click the TerminalFour logo in the top left corner.
Go to the parent section where you need the link section to appear. We will use 4-H in this example.

  1. 4-H > Blue Actions menu (to the right of 4-H).
  2. Create Section

To get a link section to show up in the hamburger menu, the following steps must be done IN THIS ORDER:

  1. Name the section.
  2. Make sure the “show in navigation” checkbox is checked.
    link section steps 1 and 2
  3. THEN check the “Mark as link section” checkbox (if you do this out of order, you will not be able to get back to the original create section screen to check “show in navigation” to get the link to show up in the hamburger menu).
  4. Once Mark as link section is checked the screen will immediately change to look like this:
    Mark as link section
  5. Click the Details tab
    Link sections: details tab
  6. Select the Section radio button to point to an internal page or external link to point to another website. In this case, the 4-H section needs to be selected so “Section” will be chosen.
    link section: details tab - section link
    link section 11 - select section
    When the Select section pop up appears, click on the name of the section that you would like to link to… in this case 4H will be chosen.
  7. The 4-H section is now selected. Click the blue “save changes” button in the bottom right corner
    link section save changes

The link section is now visible under the 4-H parent section. Notice that there is a chain-link icon next to the 4H link section to indicate that the link goes to an internal site page.
Link section 4-H chain icon

If we preview the 4H section (blue actions menu > preview next to 4H) and click the hamburger menu > 4H, the link section is now visible in the secondary flyout menu.
4-H section link at bottom of hamburger menu

Reordering Page Sections

Since the 4H landing overview page needs to be at the top, the menu order needs to be changed. To reorder the nested sections and link sections, we need to go back to the site structure.

  1. Click on the parent section name, 4H (or blue actions > Edit section next to 4H).
    link section - 4-H section
  2. Click on the More tab
    link-section-reorder-more
  3. Child Sections
  4. Click on the crosshairs to the left of the section to be moved, and drag the section up or down without releasing your mouse until the section is in the correct position. When you are finished, click the blue save changes button in the bottom right corner.
    link sections - drag section to reorder
    For this example 4H will be moved UP before save changes is selected.
    link sections - move 4H up

In the site structure, 4H is now above 4-H Clubs.
4-H link section under 4-H

If we preview the 4H page (blue actions menu > preview) and click 4H in the hamburger menu, we will now see the 4H link section is above 4H Clubs in the menu.
link section - extension hamburger - link section at top

Adding an External Link – Link Section

External links can be added to the hamburger menu as well. For this example, a Florida 4-H External site link section will be created.
In the site structure, next to 4H, click the blue actions menu > Create Section
Creat t4 section

To get the new link section to show up in the hamburger menu, the steps below need to be done IN THIS ORDER:
link section - external - Florida 4-H

  1. Name the section.
  2. Make sure the “show in navigation” checkbox is checked.
  3. THEN check the “Mark as link section” checkbox (if you do this out of order, you will not be able to get back to the original create section screen to check “show in navigation” to get the link to show up in the hamburger menu).
    Mark as link section - external link

Once Mark as link section is checked the screen will immediately change to look like this:
Florida 4-H link section

Click the Details tab
Florida 4-H Details tab

  1. Make sure the External URL radio button is selected.
  2. Add the website link http or https:// of the external website and in the Link URL box.
    Tip: we suggest copying the Link URL from a web browser to avoid typos in the site link.
    link section - external URL link fields
  3. Click Save changes in the bottom right-hand corner.
  4. Go back to the site structure and you will see the newly created link section.
    Notice the icon next to the Florida 4-H shows an external site icon.
    External section link icon - Florida 4-H

Next to 4H > Blue Actions > Preview > Click 4H in the Hamburger and the external link section is now visible under 4H Clubs.

Hamburger flyout menu showing external link at bottom

0


Posted: August 14, 2015


Category: WCMS Updates
Tags: TERMINALFOUR Tips


Subscribe For More Great Content

IFAS Blogs Categories