Menu Design Element Guide

Select Zone:

If your instance has more than one Zone, this option allows you to select one of them.

Menu Title:

Use this field to name your menu.

Once placed, use the Create New button to generate the new menu.

Options:

Once the Menu is created, the second block will be displayed.

This block will contain the following options:

Channels | Sections | Topics | Design Objects | Auto Links | Custom Labels

Channels:

Lists the Channels available from the Zone

Sections:

List the Sections available from the Zone.

The name of the Channel is placed (in brackets) after the Name of the Section.

Topics:

Lists the available Topics from the Topic List in the Zone.

Choose a topic from the list so you can add it to the menu.

Design Objects:

Lists the available Design Objects where the menu can be included.

Auto Links:

Menu Auto Links work the same way as Auto Links on the Button Design Element.

The Menu Auto Link can find links for several screens automatically for you without the need to input the url : i.e. Registration (you can only have one registration on the site, therefore, Affino knows which channel to point it to).

Same for Login/Logout: this is useful because Affino recognises if users are logged in or logged out and based on that, the menu will then show the correct link.

Options:

Home | My Account | My Information | My Profile | My Messages |

Send Password Reminder | Login/Logout | Edit Profile | My Preferences | Cookie Settings

Custom Labels:

Custom Labels are the same as the Custom Links on the Button Design Element.

This means that you can add your own menu button linking it anywhere.

For example, I can create a custom button which is called Google and link it to the google site.

Set a Label Name and Link for your custom label.

Get started by adding a name.

Once a Menu is created it becomes the active Menu.

All available Menus are in the dropdown.

Select the menu you wish to edit:

You can then add items from the left-hand side panel using the Add to Menu button:

The bottom of the screen has an Audit Panel which includes the following:

• Created: Date and Time stamp
• Created by: User who created the menu
• Last Updated: Date and Time stamp

Channel fields and options:

Label: keep this blank to leave the original channel name or you can overwrite the name with a different one by entering a new label.

Security Right : Select a Security Right to apply to this menu. Only users with the specific security right will have access to this menu.

Custom ID: Enter a custom ID to be generated in the HTML.

Custom Class: Enter a custom class to be generated in the HTML.

Channel Focus: Select the Channel(s) you want to present a focus state on this menu item.

Section Focus: Select the Sections(s) you want to present a focus state on this menu item.

Open in new tab: Select to open the menu link in a new tab.

Pass Through Topics: This allows you to pass through filtered content based on the Channel Topics.

Section fields and options:

Label: keep this blank to leave the original channel name or you can overwrite the name with a different one.

Security Right : Select a Security Right to apply to this menu. Only users with the specific security right will have access to this menu.

Custom ID: Enter a custom ID to be generated in the HTML.

Custom Class: Enter a custom class to be generated in the HTML.

Channel Focus: Select the Channel(s) you want to present a focus state on this menu item.

Section Focus: Select the Sections(s) you want to present a focus state on this menu item.

Open in new tab: Select to open the menu link in a new tab.

Pass Through Topics: This allows you to pass through filtered content based on the Channel Topics.

Topic fields and options:

Label: keep this blank to leave the original channel name or you can overwrite the name with a different one by entering a new label.

Security Right : Select a Security Right to apply to this menu. Only users with the specific security right will have access to this menu.

Custom ID: Enter a custom ID to be generated in the HTML.

Custom Class: Enter a custom class to be generated in the HTML.

Channel Focus: Select the Channel(s) you want to present a focus state on this menu item.

Section Focus: Select the Sections(s) you want to present a focus state on this menu item.

Target Section Focus: Select the Section you wish to target when users click on a topic menu item.

Open in new tab: Select to open the menu link in a new tab.

Pass Through Topics: This allows you to pass through filtered content based on the Channel Topics.

Design Object fields and options:

Label: use this blank to leave the original channel name or you can overwrite the name with a different one by entering a new label.

Security Right : Select a Security Right to apply to this menu. Only users with the specific security right will have access to this menu.

Custom ID: Enter a custom ID to be generated in the HTML.

Custom Class: Enter a custom class to be generated in the HTML.

Channel Focus: Select the Channel(s) you want to present a focus state on this menu item.

Section Focus: Select the Sections(s) you want to present a focus state on this menu item.

Auto Link fields and options:

Label: use this blank to leave the original channel name or you can overwrite the name with a different one by entering a new label.

Security Right : Select a Security Right to apply to this menu. Only users with the specific security right will have access to this menu.

Custom ID: Enter a custom ID to be generated in the HTML.

Custom Class: Enter a custom class to be generated in the HTML.

Open in new tab: Select to open the menu link in a new tab.

Custom Label fields and options:

Label: use this field to enter a custom label.

Security Right : Select a Security Right to apply to this menu. Only users with the specific security right will have access to this menu.

Custom ID: Enter a custom ID to be generated in the HTML.

Custom Class: Enter a custom class to be generated in the HTML.

Open in new tab: Select to open the menu link in a new tab.

Pass Through Topics: This allows you to pass through filtered content based on the Channel Topics.

Control > Design > Design Objects > Design Object Editor

The control side Menu Design Element reflects the menu on the display side.

Main Panel:

Fields and options:

• Menu: Select the Menu you want to display
• Type Of Menu: Select the type of menu layout
• Options: Dropdown | Full Width | In-Page | Mobile | Collapsible
• Menu Bar Alignment: Select menu bar alignment (note: this will only work for Dropdown and Full Width type)
• Options: Left | Right | Centre | Stretch | Stretch Evenly
• Add Panel Box Shadow: Select to add a show to the panel

Fields and options:

• Sub-Levels Appearance: Select the behaviour for the Panel appearance
• Hover will activate the panel when the mouse hovers over the button
• Click will activate the panel when the mouse is clicked on the button

• Sub-Levels Disappear: Select the behaviour for the Panel disappearance
• Mouse out will make the panel disappear when the mouse is no longer on the button
• Click will remove the panel by clicking anywhere off the panel

• Sub-Levels Appear Delay (Hover): Enter value in milliseconds for the Panel Appear delay. 1000ms = 1 second (only for 'Hover' sub-level appearance)

• Sub-Levels Disappear Delay (Mouse Out): Enter value in milliseconds for the Panel Disappear delay. 1000ms = 1 second (only for 'Mouse Out' sub-level disappearance)
• Dropdown Type Transition Effect: Select the transition animation
• Mobile Type Expand Icon: Upload your mobile expand icon.
• If blank, level 1 elements will be displayed by default
• Mobile Type Collapse Icon: Upload your mobile collapse icon.
• If blank, level 1 elements will be displayed by default
• Do Not Use Default Icons: Select to hide the default text icons if there's none selected
• Note this won't affect the Mobile menu expand/collapse icons

Level 1 panel: fields and options

• Text Style: Styles are coming from Design Style (Font Family, Font Size, Text Color, Text Transform and CSS)
• Options: Normal | Medium | Small | Heading 4, 5 and 6
• Text Color: Select the Text Color
• Text Bold: Select to bold the text
• Background Color: Select the background Color
• Focus Text Color: Select the Text Color
• Focus Background Color: Select the background Color
• Border: Select to show the border
• Border Color: Select the border Color
• Padding Top: Top Padding in pixels.
• Padding Right: Right Padding in pixels
• Padding Bottom: Bottom Padding in pixels
• Padding Left: Left Padding in pixels
• Up Icon: Upload your custom Up Icon.
• If blank, Affino will use the arrow character from the font
• Down Icon: Upload your custom Down Icon
• If blank, Affino will use the arrow character from the font

Level 2 panel: fields and options

Same as Level 1 plus:

• Left Icon: Upload your custom Left Icon
• If blank, Affino will use the arrow character from the font
• Right Icon: Upload your custom Right Icon
• If blank, Affino will use the arrow character from the font

Level 3 panel: fields and options

Same as Level 1 minus the:

• Up Icon
• Down Icon
• Left Icon
• Right Icon