Mega Menu On Sharepoint 2013

Question

I will like to know how to create a mega menu on sharepoint 2013 foundation. I have seen some tutorials on the internet but all of them deals with SP2010 only and these tutorials dont work for SP2013.

I have seen some questions here on this site like the link shown here Mega-menu tab on multiple site collections .

I was hoping someone will help me with a hint on how to solve this.

Thanks.

Answer 1

The menu pulled either by Managed Navigation or structured, more or less has same implementation of css classes by SharePoint.

It is very much possible to customize the mega menu according to our own needs provided we know nuts and bolts of SharePoint's rendered html.

jQuery and css are the 2 ingredients we need to stew our mega menu :)

I can divide this process into 2 steps.

1.

Know the SharePoint's oob css applied on mega menu.

If we notice the menu using developer's tool of browser, the menu structure is rendered in UL LI and each menu have class named either "dynamic" or "dynamic-children" applied to it. If a menu has sub menus than "dynamic-children" is applied and on hover of it a fly out is shown, otherwise "dynamic" is applied.

So we need to get rid of these 2 classes to get full control over the menu.

2.

Customize Menu

Use jQuery to get hold of UL which contains the menu, remove oob classes and add your own custom classes. The ID of UL would be something like "zz13_RootAspMenu", but getting ul this way is not recommended, I would suggest goto master page and surround this menu control with a div of its unique ID and then find this UL on run time.

Here is the code for getting UL.

var i = 0;
var ul = null;
jQuery("div#YourDivId ul").each(function () {
    i++;
    if (i == 1) {
        ul = this.id.toString();
        return false;
    }
});
ul = jQuery("ul#" + ul);

After you get UL object, then remove oob classes of menu inside it and add your custom classes.

//Remove first level classes
ul.children(".dynamic-children").removeClass("dynamic-children").addClass("your-custom-class");

// Replace OOB class and set with your custom for level 2
var liCustomDynamicChildren = ul.children("li.your-custom-class");
liCustomDynamicChildren.children("ul").removeClass("dynamic").addClass("YourDynamicClassL2");

// Replace OOB class and set with your custom for Level 3
jQuery("ul.YourDynamicClassL2").children("li.dynamic-children").children("ul.dynamic").removeClass("dynamic").addClass("YourDynamicClassL3");

This is how you start customizing Mega Menu on run time with help of jQuery and applying your custom css on it.

Note: It can only be done on run time, because if you open master page and see the menu snippet, it is nothing but a SharePoint server control which is rendered in UL LI structure

Answer 2

Consider going out of the box with Managed Navigation. This will allow you to have flyouts and I believe up to 3 levels deep (and more levels may be a bad user experience). Using cross site publishing, you can also have the navigation cross site collections: https://www.captechconsulting.com/blogs/sharepoint-2013-managed-navigation

Answer 3

Have you tried this example for SP2013?

Here's a YouTube tutorial also.