Fly-out Menu

Layout Variant: G012 - G012b

Content Type: Collection

Aspect Ratio: 

• Not used. The only image supported is in the optional eSpots

Expected Use:

This is used on emerson.com as part of the global navigation. This is a complex menu that allows authors with administrative privileges to create a robust 4-column fly-out menu, which is typically used to reveal first- and second-level product categories from each platform’s product taxonomy.

• The first column (furthest left) can hold up to 10 items with categories that have less than approximately 50 characters per item. When items have longer character counts, they will wrap to two lines and require a re-evaluation of the number of items available to display.
• For the second and third columns, the same rules apply — aim for roughly 9-10 items per column max (18-20 total). However, if you have fewer items, the columns will balance so that if you have 6 items, for example, then 3 items each will appear in the second and third columns. If you have more items, ability to scroll will be enabled automatically. 
• The fourth column is typically associated with product category brands and follow the same limitations as the first column. Authors may add up to two eSpots at the bottom of this menu type.

For desktop, on hover, the fly-out menu reveals additional links. For mobile, on tap, the fly-out reveals additional links.

As a supplemental component to the G001, the G012B Global Header Navigation Fly-out Menu is a variant of the G012 allowing authors to optionally include one or more “View All” or other relevant Text CTAs within each of the menu’s columns. While menu items should link users to associated child pages within the corresponding menu taxonomy, Text CTAs should drive uses to more top-level category or relevant support pages when applicable.

How to Build the Menu:

Create a Collection and set the Layout Variant to G012 or G012b.

• Teaser Title - Enter the text to display at the Platform level, e.g. "Products" as the Teaser Title. This text will need to be translated. A link is not supported here.
• Items - include Collection(s) for each product category in the Items list of the G012 collection. While it is expected to have 3-10 Collections, there is no required minimum. See "First Level Collection(s)" below for instructions on how to construct these Collections. 
• Promotional Teaser - The menu allows for zero, one or two optional "eSpots" that are activated by adding teasable content to the Promotional Teaser. This can be a Page, External Link, Download, etc. For each of the Promotional Teasers, the must contain the following to render the eSpot correctly:
  • Teaser Title - the CTA label that appears on the eSpot
  • Pictures and Media - the image used as the background of the eSpot
• Call-to-Action Button - Applicable to G012b only, an author can have an optional link by selecting the "Linked Call-to-Action Label" and adding a Teaser Ex. Contact Us. Refer to G012-G014 Regression Page --> G012-G012bSample 2.

First Level Collection(s):

• Teaser Title - Not used. The menu label is controlled by the Call-To-Action Button.
• Call-to-Action Button - Set the radio selection to "Linked Call-to-Action Label" and add a Teaser. This will be the hyperlink for the name in left-most column. The titles of the linked pages will be displayed in the navigation.
• Items - You will add two Collections to the Items List of the G012 Collection. See "Second Level Collections" below for instructions on building each of these collections.
• Promotional Teaser - This is not used for this Collection. 
• Layout Variant - set to Default. Styling is controlled by the parent G012 Collection.

Second and Third level Collection(s):

• For each of the First Level Collections, create new Collections for example "Products" and "Brands" that will form the second and third columns of the menu.
• Add a Teaser Title - this is the title of the flyout menu for columns two and three. 
• Call-to-Action Button - you can have a link for either column heading title by selecting the "Linked Call-to-Action Label" and adding a Teaser.
  • If there is no Teaser in the Call-to-Action Button the Teaser Title of the Collection will be used (e.g. Products) and this text will need to be translated. There will be no hyperlink for that menu item.
  • If there is a linked Page (e.g. Brands) then the Page's Title will be used. Note, this link replaces the "Views All Brands" from the 2016 version of this flyout menu in Column 3.
• Items - add Teasers to the Items List for each of the two Collections representing the menu items in the second and third columns of the flyout menu that will represent the products and brands respectively. A max of 16 links will be displayed for Column 2 (Products), and a max of 8 links will be displayed for Column 3 (Brands).
• Promotional Teaser - This is not used for this Collection. 
• Layout Variant - set to Default. Styling is controlled by the parent G012 or G012b Collection.
• Optional Local Settings - Authors can enable optional features to display content by adding/enabling the following properties.
  • "columnBorder" -  a boolean type that allows three column display with line partition. 
  • "threeColumnsLayout" - a boolean type that allows three column display. This is applied on the second to fourth collections.
  • "headerLink" -  a link type (displayed as Link to All). A Teaser needs to be added as value in order to enable the header link. Refer to ESG example on the G012-G014 Regression Page --> G012-G012bSample 2.
  • "callToActionDisabled" - a shortcut boolean type that disables CTA button display.