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.