Two Column Global Top Menu in SharePoint 2010 using JQuery

Hello!

Few days back I was just configuring top menu for a publishing site in SharePoint 2010. One of the menu Heading had around 30+ child links. For users, it was difficult to use such a long menu.

I came across many posts which suggested to make menu depth to 2 in master page. But that solution was only applicable for automatically created menus to display sub sites and pages as fly-out menus. But in my case, it was a manually created menu. And I certainly did not need fly-out menus. I too did not have permission to write any code.

After going through few posts across Google I found an articles about two-column unordered lists. I would like to thank the author of http://alistapart.com/article/multicolumnlists whose tricks were very helpful to solve my problem. The JQuery solution is given below:

———————————————————————————————————————–

// Run the CreateTwoColumns jquery code after dom is loaded

_spBodyOnLoadFunctionNames.push(“CreateTwoColumns”);

// Function to create two column lists
function CreateTwoColumns() {
var count = 0;
// the max no of menu items you think should appear in a single menu. if

// the count is greated than that, we will break the menu to two parts

 

var maxLengthForMenu = 20;
var newColumnIndex = (maxLengthForMenu/2) + 1;
var maxWidth = 0;
var maxheight = 0;
var targetList = $(“.menu-horizontal ul”).filter(function () { return $(this).children(“li”).length > maxLengthForMenu });
// Get the max height of our new two column menu

maxheight = targetList.children(“li”).eq(0).height();
// Get the max width of each column
$.each(targetList.children(“li”), function(){
var currentWidth = $(this).width();
if(currentWidth > maxWidth)
maxWidth = currentWidth;
});

// Apply CSS to move list items and create 2 columns
$.each(targetList.children(“li”), function(){
$(this).css(“width”,  maxWidth + “px”);
if(count >= newColumnIndex)
$(this).css(“margin-left”,  maxWidth + “px”);
count = count + 1;
});
targetList.children(“li”).eq(newColumnIndex).css(“margin-top”, “-” + (maxheight * newColumnIndex) + “px”);
}

———————————————————————————————————————–

Cheers.