In some scenarios, you may want your users to be able to quickly and more effectively check any navigation item you're displaying. This same task is made even more complex with the default Cascading menu provided by the out-of-the-box SharePoint experience.
BindTuning themes provide the flexibility to change that same experience, utilizing the built-in Mega menu capability. This same feature is accommodated in both Modern and Classic SharePoint experiences.
Classic SharePoint
Our themes include a Mega menu, which is not included in the default Classic SharePoint sites and it needs at least 3 menu levels to work as a mega menu.
To get a menu with at least 3 levels you need to use the Managed Navigation. To configure your term set, please proceed as follows.
- In your SharePoint site:
- Go to Settings > Site Settings;
- Under Look and Feel select Navigation;
- Select the Managed Navigation for the Global Navigation;
- Scroll down and click Create Term Set;
- Once created, open the Term Store Management Tool to edit the term set;
- Expand your term set and create new terms;
- Build your menu structure with at least 3 levels;
- Save the menu;
- To accomplish the following steps you need the SharePoint designer:
Open your site with SharePoint designer;- Farm solution:
All files > _catalogs > master page - Sandbox solution:
All files > _catalogs > master page > THEMENAME
- Farm solution:
- Check out and edit the master page you are using;
- Locate
$('#MenuH').BindMENU(options); - Change the option from Style:"default" to Style:"MegaMenu";
- Save the master, check it in and if asked publish the major version.
Modern SharePoint
The same Mega menu experience can be accomplished when on Modern SharePoint sites.
Unlike Classic SharePoint, we're able to configure three levels of navigation, hence covering all the dependencies for a Mega menu, utilizing both Managed Metadata, as well as the default (Global) navigation.
Global Navigation
When utilizing Modern SharePoint's Global navigation (default), we're given the ability to create a navigation structure that utilizes three navigation levels, making the usage of a Mega menu a possibility.
To do this:
- Configure your Global navigation utilizing Modern SharePoint's default interface;
- Click on the button BindTuning Settings;
- Click on Navigation;
- Under Sub-menu styles, choose the Megamenu option.
After selecting the Mega menu option, your default navigation will display that same sub-menu style.
Managed Navigation
By default, Modern Site Collections do not allow for the usage of Term Set navigation. However, BindTuning themes provide this same functionality.
To set up your Mega menu, follow the steps below:
- Open your site collection;
- Click on the button BindTuning Settings;
- Click on Navigation;
- On the Menu provider dropdown, select Term Set;
- Navigate to your Term Store Management Tool, and find your corresponding term set.
- On your General tab, copy the Unique Identifier;
- Paste the ID under Term Set ID;
- Under Look and Feel, change the menu style to Megamenu.
After following the above-mentioned steps, your navigation will display the Mega menu as expected.
Thanks mate, but I don't have Navigation menu under the look and feel! please advice
Hi
I have gone from steps 1 to 11 but cannot find the <div id="MenuH" ...> tag anywhere?
Will this work for SP Server 2013 on premise or only Office 365?
What did I miss?
Thanks
Garreth
The code they are referring to is in the masterpage that came with the Design Template from bindtuning, not in the default masterpage.
Why should I be locating on my MasterPage? For example I'm not sure what I'm supposed to do here " </Template_Controls>
/SharePoint:DelegateControl
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2"
SkipLinkText="" />
/asp:ContentPlaceHolder
/SharePoint:AjaxDelta
</div>"
After building the menu structure in the "Term store management tool" you may discover none of the sub menu items appear, and no flyouts appear at all.
Verify that the Publishing site feature is Activated from YourSiteURL/_layouts/15/ManageFeatures.aspx
Try Deactivating and Re Activate the Theme Package and the menu structure should work.
Make sure you created at least 3 levels of Managed Metadata in your Term Store Management.
Do any of these menus work in SharePoint 2010? The demo clearly shows these menus in the content.
Hi, can you let me know how to display 4 layers deep?