JEP- Mega Menu Add-On: Configuration Guide

Document created by mayabhatt Employee on Jun 30, 2020Last modified by mayabhatt Employee on Aug 16, 2020
Version 12Show Document
  • View in full screen mode

 

Configuration

Configuration Panel

  • Apps > JEP Mega Menu
  • Create Menu > Mega Menu Configuration
  • Direct Link: <instance url>/apps/mega-menu-add-on

To configure the Mega Menu Add-On, ensure the appropriate user is added to the User Group (e.g. Mega-Menu-Addon-Editors) created during Installation. Refer to the first step under "Installation" in this document

General Settings

 

General SettingsFeature description

General Settings > General Settings

  • Open Dropdown on:
    • Hover
    • Click
  • Effect for panel / dropdown
    • None
    • Fade
    • Slide
    • Push - site content is pushed down
  • Speed of panel rendering: Fast / Medium / Slow
  • Line Height: Defines the height of the hover background
  • Shadow
  • Logo: Link to Logo image file
  • URL: Target link when click on logo
  • Cache Time: Time before Mega Menu structure is updated
    • Greater values can improve performance
  • Mega Menu Position:
    • Show Mega Menu above standard Jive header bar
    • Show Mega Menu below standard Jive header bar
    • Merge Mega Menu with standard Jive header bar

General Settings > General Settings: Main Navigation : Main Menu - general

Main Navigation (Top Level)

 

  • Preview
  • Menu Height
  • Menu Width (set 40px less than Global Theme width configured)
  • Menu Background Color
  • Menu Padding
  • Menu Border

General Settings > General Settings: Main Navigation : Top Level Menu Items

Top Level Menu Items

  • Font: Family - Supports various font families, Size, Color, Text Transform, Weight, Decoration, Alignment
  • Font hover: Color, Weight, Decoration
  • Background Color, can be single color or a gradient from/to shade: on Menu hover and when active
  • Item Spacing
  • Item Padding (left, right)
  • item Divider: Enabled/Disabled, Color and Opacity

 

 

General SettingsFeature description

General Settings > General Settings: Dropdown Panel: Panel Settings

Dropdown Panel

 

  • Preview
  • Panel background
  • Panel width in percent
  • Panel padding
  • Panel border: Color and size
  • Column Padding

General Settings > General Settings: Dropdown Panel: Grid (Column)

Grid (column)

  • Title: Family, Size, Color, Transform (Normal/Capitalize Words/UPPER CASE/lower case), Weight (Light/Bold/Normal), Decoration(None/Underline), Align (Center/Left/Right)
  • Font: family, size, color, transform, weight, decoration, alignment
  • Padding
  • Border

General Settings > General Settings: Dropdown Panel: Sub-level 1

Sub-menu item (Level 2)

  • Item Title: Family, Size, Color, Transform (Normal/Capitalize Words/UPPER CASE/lower case), Weight (Light/Bold/Normal), Decoration(None/Underline), Align (Center/Left/Right)
  • Item Font (hover): color, weight, decoration
  • Item Background
  • Item Background (hover)
  • Item Padding (top, right, bottom, left)
  • item Border

General Settings > General Settings: Dropdown Panel: Third Level Menu Items

Third Level Menu item

  • Item Title: Family, Size, Color, Transform (Normal/Capitalize Words/UPPER CASE/lower case), Weight (Light/Bold/Normal), Decoration(None/Underline), Align (Center/Left/Right)
  • Item Font (hover): color, weight, decoration
  • Item Background
  • Item Background (hover)
  • Item Padding (top, right, bottom, left)
  • item Border

Save configuration on page

Confirm all settings with Save Mega Menu Settings

 

Elements of Visibility Rules

Visibility RulesElement description

Create Visibility Rule

  • Click on Create Visibility Rule to add a Rule.
  • Enter a Title for the Rule.
  • Click on Add Rule.

 

These configured Visibility Rules appear on different levels of Menu configurations (as explained in the respective sections in this document) with the following options:

  • Show for All: Default visible to all
  • The configured Visibility Rules can be selected on each menu item

Manage Rules

Profile Field - Title

  • Select Profile Field Name. All the Profile Fields configured in the Admin Console are displayed as values in a dropdown.
  • Enter Profile Field Value
  • Specify the Condition for the user's profile field value to match all/any rule
  • Click Save and Save Mega Menu Settings to save updates.

 

 

Elements of Menu Settings

 

Menu SettingsElement description

Menu Settings > Create new menu item

Main Main - Item:

  • Item Title
  • Item Target/URL Type:
    • None:
    • Content Picker: Search and select a Jive content
    • Place Picker: Search and select a Jive place
    • URL > Set Target URL
    • Target > Set Target
  • Item Icon - Select Icon from Library
  • Item Layout:
    • None
    • Grid: Menu - Sub Menus are displayed in a multi-column/row Layout
    • Vertical Tab - Sub Menus are displayed in a single Column
  • Tab Column Width

Menu Settings > Manage Menu Items

Use the manage icons:

  • to edit (pencil icon),
  • to add/access sub-menu items (three-lines icon)
  • to delete (trash can icon)
  • to re-arrange the item: drag and drop within the list

Menu Settings > Main Menu - Translation for various languages

Menus can be configured in various languages:

  • Click on Create New Translation
  • Select the Language in which the Main Menu is to be displayed
  • Provide the Title in the respective Language
  • Item Target/URL Type :
    • None
    • Content Picker - provide the content in the respective language
    • Place Picker - provide the Place, the user is to be navigated to
    • URL > Specify the dedicated target URL link (internal/external)

Menu Settings > Creating Dropdown Menus

To create/access dropdown menus:

  • Click on the burger/three-lines icon
  • Click on the pencil icon to add/edit details
    • Sub-Menu Title, Icon, Visibility Rule
  • Click on Save

Menu Settings > Creating menus for the Dropdown menus - Vertical Tab Style

To create the Dropdown menus in Vertical layout:

  • Select the Layout as Vertical Tab and set the % for Tab Column Width
  • Specify the other details: Title, URL Type (Content Picker/Place Picker/URL), URL(Place/Content/URL, Icon, Visibility Rules as appropriate.
  • Click on Save to save the Settings.

 

 

 

 

 

 

 

 

 

 

 

  • To add more Dropdown menus, click on Add Column / Add Row.
  • To delete a Dropdown menu, click on the appropriate trashcan icon
  • Click on Save

Menu Settings > Creating menus for the Dropdown menus - Grid Style

 

 

 

To create the Dropdown menus as a Grid:

  • Select the Layout as Grid (Note: Tab Column Width is disabled)
  • In the screen, use the edit set of icons highlighted to:
    • Pencil icon: edit the column and provide the sub-menu details: Title, URL Type (Content Picker/Place Picker/URL), URL(Place/Content/URL, Icon, Visibility Rules as appropriate
    • Mobile icon: Show/Hide menu in mobile
    • Trashcan icon: Delete column
    • + icon: add another sub-menu/element. This opens the Create Item screen
  • Adjust the column width in the grid display by increasing/decreasing the parameter"< 4/12 >" or you can work with the numbers to decide the columns to be displayed a large/narrow column.
  • Click on Add Column / Add Row to add more columns in the same row or to create a new row in the Grid layout.

 

In the Create Item screen

    • Select Type:
      • Navigation Item: Directs the user based on the Content, Place or URL configured.
      • Image: Use this feature to illustrate images.
      • Text: Can be used to add Text to an Image or to display a Preview text
    • Accordingly provide the other details on the screen:  URL Type (Content Picker/Place Picker/URL), URL(Place/Content/URL, Icon, Visibility Rules as appropriate
    • To create the sub-menu in various languages, click on Create New Translation and provide the specific details.
  • Click on Save to save the Settings.
  • Click on Save Mega Menu Settings to save all the configured settings.

Menu Settings > Creating menus for the Dropdown menus - "None" Style

To create a Menu/Sub-menu as a Title which can be directly selected via a link, select the Layout as None.

  • Specify the other details: Title, URL Type (Content Picker/Place Picker/URL), URL(Place/Content/URL, Icon, Visibility Rules as appropriate.
  • Click on Save to save the Settings.
  • Click on Save Mega Menu Settings to save all the configured settings.

 

Mega Menu is created successfully!

 

Exporting/Importing Configuration

  • To use the current configured settings in the Add-On on another environment or instance, click on Export/Import:

  • Click Export/Import
  • Copy data
  • Click on Save to save the Settings.
  • Click on Save Mega Menu Settings to save all the configured settings.

 

The Export/Import feature is also a great way to save previous configurations as back up.

 

 

Sample Configuration

 

Sample Mega Menu

Add-On Configuration

Sample Main Menu:

Sample Grid Menu:

Sample Tab Menu:

Exported Configuration: Refer attached txt file

 

Installation

 

Installation on Cloud Jive instance

 

1. Go to Jive Admin Console > People > Create User Group. Enter a Group name for the administrators of this add on, for example: Mega-Menu-Addon-Editors and add the appropriate member(s) to the group.

Only the Members added to this User Group can access and configure the Mega Menu Add-On configuration settings.

2. Add the following System Property via Admin Console > System > Management > System Properties: customer.header.html.enabled = true.

This will enable “Custom Header Html” textbox in the Theme page > Advanced options popup:

 

3. Go to Jive UI > Avatar Menu > Add-ons.

4. Select Upload Package and choose the latest zipped file of the Mega Menu Add-on made available via your Thruinc access. Click on Install Now.

5. Go to Avatar Menu > Add-ons > All Add-ons > Mega Menu Add-On and click on the associated gear icon > Settings.

5a. Under App Settings, select the gear icon.

6. In the screen Manage App User Groups, remove "All Registered Users" (default settings) and add the User Group created in step 1 (example, Mega-Menu-Addon-Editors.)

7. Click on Configure Now and a list of files that need to be synced with the root space will be shown (NOTE: if all the files are up to date no sync is required):

8. When clicking on "SYNC", if the Add-Ons are running on a different domain than the Jive application (secure mode - default behavior), enter the credentials of the current user, which has to be non-federated account:

9. Once the sync is completed all the status icons should be a checkmark. The custom header code that needs to be added in Jive will be shown.

10. Copy the displayed custom header code, then click Save and Save and Activate on the next screen.

11. Go to Avatar Menu > Theme > Advanced > Custom Header and add the HTML code, generated in the previous step, in third textbox - "Customer header HTML" and then "Save and Publish" this new Theme.

12. Go to the configuration page via the URL: <instance URL>/apps/mega-menu-add-on to configure the Mega Menu Add-On.

 

Installation on Hosted/On-prem Jive instance

1. Go to Jive Admin Console > People > Create User Group. Enter a Group name for the administrators of this add on, for example: Mega-Menu-Addon-Editors and add the appropriate member(s) to the group.

Only the Members added to this User Group can access and configure the Mega Menu Add-On configuration settings.

2. Go to Jive UI > Avatar Menu > Add-ons.

3. Select Upload Package and choose the latest zipped file of the Mega Menu Add-on made available via your Thruinc access. Click on Install Now.

4. Go to Avatar Menu > Add-ons > All Add-ons > Mega Menu Add-On and click on the associated gear icon > Settings.

5a. Under App Settings, select the gear icon.

6. In the screen Manage App User Groups, remove "All Registered Users" (default settings) and add the User Group created in step 1 (example, Mega-Menu-Addon-Editors.)

7. Click on "Configure Now" and a list of files that need to be synced with the root space will be shown (if all the files are up to date no sync is required):

8. When clicking on "SYNC", if the Add-Ons are running on a different domain than the Jive application (secure mode - default behavior), enter the credentials of the current user, which has to be non-federated account:

9. Once the sync is completed all the status icons should be a checkmark. The custom header code that needs to be added in Jive will be shown.

10. Copy the displayed custom header code, then click Save and Save and Activate on the next screen.

11. Open the Admin Console and go to  <instance URL>/admin/settings-themes.jsp

11.1 Edit selected custom theme

11.2 Locate the /soy/nav/header.soy template, select and click “Create New Template”

11.3 - Add the HTML generated in step 4 in the area below:

12. Save template, go to Themes pages. Remove Global Theme:

13. Under Global Theme Map, select "custom" in the dropdown and then click on "Set Global Theme", so changes will be applied.

14. Add custom css in Theme page:

j-header-mode-simple #top {

  display: none

}

 

.j-header-mode-simple #j-header-wrap {

  position: relative !important

}

15. Save Theme.

16. Go to the configuration page via the URL: <instance URL>/apps/mega-menu-add-on to configure the Mega Menu Add-On.

 

Outcomes