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.

  • Hi Korede, I have just finished developing Mega Menu on SP2013 server. – Asad Refai Apr 25 '15 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 Apr 25 '15 at 16:11
  • Hi Asad, yes I need to customize with my css too – Korede Lawrence Oluwafemi Apr 26 '15 at 15:01
  • Excellent, I think I can help you. Take a note of my answer below. – Asad Refai Apr 27 '15 at 5:58
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

  • 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 – Korede Lawrence Oluwafemi Apr 28 '15 at 10:07
  • Yes please sure.. – Asad Refai Apr 28 '15 at 10:07
  • I seem not to understand your point no 1, where do I get the sharepoint's oob from – Korede Lawrence Oluwafemi Apr 28 '15 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 Apr 28 '15 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 Apr 28 '15 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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