Thursday, September 20, 2012

Sharepoint 2010 - Customizing Quick Launch with pages

How to show different quick launch menu items in different pages?

The quick launch in Sharepoint is an object common to all pages of the site.
To show menu items according to the page you visited, I followed client side method with javascript (jquery).
Here's how, using Sharepoint Designer 2010.

On css stylesheet of the site, I added this instruction, which hides all the items in the Quick Launch:

. s4-ql ul.root> li {
display: none;
}

Then, make note of the position of the menu items in the quick lanuch: eg.


0 - Document Libraries
1 - Lists
2 - MyLink
     0 - MySubLink1
     1 - MySubLink2
3 - MyOtherLink
4 - MyLastLink



The pages follows the following rules:

Page1 shows 0,1,4
Page2 shows 0,2,3
Page3 shows 0,2 (and sub ​​links 1), 3.4


And now, I change the master.page, adding references to jquery and inserting the following code:

//get all items in the quick launch
var li_nav = $(".vertical-menu>ul>li");
//get page name (from url, return page1.aspx)
var page_name = GetCurrentPageName();
//for each li
var i = 0;
li_nav.each(function(){
    if (page_name.indexOf("page1")> -1) {
       if (i == 2 || i == 3)
         $(this).hide();
       else
         $(this).show();
    }
    else if(page_name.indexOf("page2")> -1) {
       if (i == 1 || i == 4)
         $(this).hide();
       else
         $(this).show();
    }
    else if(page_name.indexOf("page3")> -1) {
       if (i == 1)
         $(this).hide();
       else if (i == 2) {
         $(this).show();
         var j = 0;
         $(this).children("ul").children("li").each(function(){
            if (j == 0){
                $(this).hide();
            }
            j++;
         });
       }
       else
         $(this).show();
    }
    else {
       $(this).show();
    }
    i++;
});

So, navigating to page1.aspx we see


0 - Document Libraries
2 - MyLink
     0 - MySubLink1
     1 - MySubLink2
4 - MyLastLink


To page2.aspx:

0 - Document Libraries
2 - MyLink
     0 - MySubLink1
     1 - MySubLink2
3 - MyOtherLink

To page3.aspx:


0 - Document Libraries
2 - MyLink
     1 - MySubLink2
3 - MyOtherLink
4 - MyLastLink