6

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.

4
  • Hi Korede, I have just finished developing Mega Menu on SP2013 server.
    – Asad Refai
    Commented Apr 25, 2015 at 16:10
  • Using OOB managed navigation you will get fly outs, but more than that do you need to customize that look too with your own custom css?
    – Asad Refai
    Commented Apr 25, 2015 at 16:11
  • Hi Asad, yes I need to customize with my css too Commented Apr 26, 2015 at 15:01
  • Excellent, I think I can help you. Take a note of my answer below.
    – Asad Refai
    Commented Apr 27, 2015 at 5:58

3 Answers 3

5

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

5
  • wow, this look like something that will work for me, but let me ask for some clarifications , I seem not to understand your point no 1, where do I get the sharepoint's oob from Commented Apr 28, 2015 at 10:07
  • Yes please sure..
    – Asad Refai
    Commented Apr 28, 2015 at 10:07
  • I seem not to understand your point no 1, where do I get the sharepoint's oob from Commented Apr 28, 2015 at 10:09
  • If you open up your developer tool and set focus on the element of the menu, you will notice these classes "dynamic" and "dynamic-children".
    – Asad Refai
    Commented Apr 28, 2015 at 10:20
  • For example you will see UL LI structure of menu. All Li (menus) having sub menu will have class "dynamic-children", and if they dont have any sub menu they will have just "dynamic". It is these classes SharePoint gets hold of menu and show fly outs.. If you remove "dynamic-children" class from menu, there will be no drop downs
    – Asad Refai
    Commented Apr 28, 2015 at 10:22
0

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

0

Have you tried this example for SP2013?

Here's a YouTube tutorial also.

3
  • I have seen that article, you need to buy there software that i read costs about $500 before someone can use there theme/masterpage Commented Feb 3, 2015 at 19:06
  • Did you look at the YouTube video?
    – jpollar
    Commented Feb 3, 2015 at 19:12
  • yes I did, it doesnt work on my sp2013 Commented Feb 4, 2015 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.