How to Configure the MegaMenu

Owned by Carol Nelson (Unlicensed)
Last updated: Feb 15, 2024 by Sara Collins

MegaMenu

A user-friendly menu that displays nested navigation levels that are set in a special configuration screen. Our MegaMenu features a custom administrative panel for the management of top-level navigation labels and submenu items. The configuration also allows for the inclusion of a featured image for each submenu topic.

Key features:

  • Easy to configure and maintainable even after using

  • Select icons, background for elements of levels 3, 4, 5 ...

 

NOTE: If you are on a version of 12.1.5 or higher and you are installing the updated Megamenu and you are using two instances of a megamenu (at site level and group level): 

  • Ensure the site level Megamenu is locked

  • Any existing Megamenus will need to be Reconfigured

    • It is recommended to copy the configuration code (from the Migrate Configuration section) - to do so you will need to have the site level Megamenu unlocked. You can then lock it again once the code is copied.

    • Move the existing Megamenu up underneath the Site Banner widget

    • Add a new Megamenu under the group banner, lock the widget, and paste in the configuration code. 

    • Save widget changes and publish the page

 

Setup and Configuration

Add the Mega Menu Widget to a Place or Application Page

  1. Navigate to the relevant group or application where you want the Mega Menu Widget to appear. If you want to add your menu to all communities, you need to use the home page for changes.

  2. Select the Pencil icon at the top left.

3. Select Manage Group Theme.

4. Select Edit this Page

5. From the Widgets menu, search for the Mega Menu by SE widget and add it to the page by dragging and dropping the widget onto the page.

6. If you want to add your menu to all communities, you need to lock Mega Menu Widget on the page.

Configure the Mega Menu

Mega Menu is needed for displaying menu items in a multi-level format. Every item can have a unique link, avatars, banner, and configuration options. Below is a quick overview of what an item is and the main components involved. 

Menu Configuration

  1. You can add CSS class to your widget

  2. Useful functions for more comfortable setup settings: Expand and Collapse All. 

Expand All to see all items on the menu. After all changes, you can “Collapse All” items.

Elements of Menu Item

  • Name & URL & Description. Every item has separate settings. You can add Name, Url, and Description.

  • Banner Image & Avatar. Use it for making your menu unique and rememberable.

 Configuration Menu Item

  1. Click Add

  2. Name your Menu Item

  3. Add URL for your item if needed (optional)

    • Check the box if you want the URL to open in a new window

  4. Add Description for your item if needed (optional)

  5. Paste the link for a Banner Image

  6. Paste the link for an Avatar

  7. Click Save

 

Click advanced settings at the bottom for additional features

Custom HTML - this offers the ability to display any custom view in the menu item (please see the example below in the screenshot) 

Custom Attributes - this is implemented for analytics (e.g. Adobe Analytics). So you can add for each menu item specific HTML attributes with key/value, for example: 

<li data-icid="menubar_challengesandprojects_all">

Challenges & Projects

</li>

So, data-icid=“menubar_challengesandprojects_all” will be used by Adobe analytics system

Custom Query Parameters - offers the ability to set payload data to the URL (key/value). It is also used for analytics systems as well to track metrics. 

 

 

Repeat the steps above for creating new menu items.

Scroll to the bottom of the widget and click the Save All button.

You are not required to save after editing each section, but we recommend you do to avoid accidentally closing the configuration panel without saving. You can click Cancel to cancel all your changes and leave the configuration panel.

Editing the created item

  1. Choose the item, which you want to edit

  2. Click 1 or 2 button for editing 

  3. Change any needed information 

  4. Click Save 

Deleting the created item

  1. Choose the item, which you want to edit

  2. Click 1 or 2 button for deleting

  3. Click Yes 

  4. Click Save 

Publish the Page

  1. Click the Publish Button in the Management Console Panel to publish your changes

2. Click the X in the Management Console Panel, to close the Panel

3. Your page will appear published with your updates

Support

Need support or want to talk to us?  Please send an email to: support@socialedgeconsulting.com

Stay up to date on our products. Become a member of our community at https://www.socialedgeconsulting.com