How to Configure the MegaMenu
- Carol Nelson (Unlicensed)
- Sara Collins
- Sveta Pylypenko (Unlicensed)
About the 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 Filtered Content List Widget to a Site, Group, or Application Page
Navigate to the relevant group or application where you want the Mega Menu Widget to appear. If you want to add your menu to your communities homepage, you need to use the home page for changes.
Select the Pencil icon at the top left.
Select Manage Group Theme.
Select Edit this Page
From the Widgets menu, search for the Search/Ask widget and add it to the page by dragging and dropping the widget onto the page.
Configure the Megamenu
While configuring the widget, DO NOT click off the white popup box or you will lose your configurations and will need to click the gear to edit and start again.
Mega Menu is needed for displaying menu items in a multi-levels 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.
Select the Gear in the right corner on the widget bar of the widget to edit the widget
Menu Configuration
Useful functions for more comfortable setup settings: Expand and Collapse All.
Expand All to see all items of 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 rememberanal.
Configuration Menu Item
Click Add
Name your Menu Item
Add URL for your item if needed (optional)
Check the box if you want the URL to open in a new window
Add a Description for your item if needed (optional)
Paste the link for a Banner Image
Paste the link for an Avatar
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
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.
Original URL: https://community.telligent.com/login
Key: ReturnUrl
Value: /p/all-documentation
After clicking on the menu item - the key/value queries will be added to the end of the URL and for this example after a successful login - a user will be navigated to the documentation page: https://community.telligent.com/login?ReturnUrl=/p/all-documentation
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 a Created Item
Choose the item, which you want to edit
Click 1 or 2 button for editing
Change any needed information
Click Save
Deleting a Created Item
Choose the item, which you want to edit
Click 1 or 2 button for deleting
Theme
Enable Mobile Menu - Please select Yes if you would like the megamenu to display for users in mobile. Select No if you do not want the menu to display in mobile
Mobile Menu Type - If you are choosing to show the menu in mobile - please specify here if it is a Site Level MegaMenu (Site) or a Group Level Megamenu (Group)
CSS Class Name - Any class names can be inserted in this field (each class name separated by a space). Please note - if you are showing the menu in mobile - this field will be prefilled with specific CSS classes - PLEASE DO NOT DELETE THESE CLASSES
Widget Height - Set a value (in pixels) for the overall height of the megamenu
Primary Color - Set a Hexadecimal Value for the Primary Color - This Applies to the Background of the Menu - and in the Drop Downs - Any Hovers on Items in the Menu as well as the static text in any menu drop down.
Secondary Color - Set a Hexadecimal Value for the Secondary Color - This Applies to the Text Color in The Menu - and The Text Color on the Text in the Dropdown When Hovered on
Advanced LESS
This section will be configured as needed - customizations for advanced theming will be stored here. This is typically updated by the Social Edge team based on your specific theming/ use case.
Migrate Configuration
Under Migrate configuration go under the COPY CURRENT CONFIG
Click copy to clipboard
Store this code somewhere safe
To Migrate the Configuration
Navigate back into the configuration of the Megamenu widget
Under Migrate Configuration make sure you are on the ADD NEW CONFIG tab
Paste the code you have kept in a safe place into the text box
Click Apply
Then click Save all
When Done Making All Changes - Click SAVE ALL
Publish the Page
Navigate back to the side menu (where the pencil icon is) and click Publish
Support
Need support or want to talk to us? Please send an email to: