Monday, October 17, 2011

SharePoint 2010 branding: left nav accordion, highlight location

Collapse/expandable left nav:
$(document).ready(function() {
 $("#s4-leftpanel-content ul.root>li.static").css("border-bottom","1px Solid #eaeaea");

 $("div.s4-ql div.menu-vertical > ul.root > li.static >a").each(function()
   {    
    // Does this have children UL elements
     if($(this).parent().children("ul").size() > 0){

   //initial load hide
   $(">ul", $(this).parent()).hide();
    $($(this).parent()).addClass("cssClosed");
  
    $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().css("display", "block");
    $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent().parent().addClass("cssOpen");
  
    //add toggle
    $(this).toggle(function() {
    $(">ul", $(this).parent()).show("slow");
    $($(this).parent()).removeClass("cssClosed");
    $($(this).parent()).addClass("cssOpen");

     },
     function() {
    $(">ul", $(this).parent()).hide("slow");
    $($(this).parent()).removeClass("cssOpen");
    $($(this).parent()).addClass("cssClosed");
     }
   );
        
  }      
  });

});

The css:
.cssClosed {
 background:url('/_layouts/images/Menu-right.gif') no-repeat 160px 7px;
}
.cssOpen{
 background:url('/_layouts/images/Menu2.gif') no-repeat 150px 7px;
}

The result (closed):




The result (opened):


Result selected:



8 comments:

Kash said...

This is exactly what I was looking for. Thank you very much. I have one problem in this, images are not showing in the quick launch. Could you please help me on this? Thanks

Kash said...

I figured it out. They were hidden behind something, so I just had to set the positions right. Thanks again for the article.

spsdev said...

nice solution, thanks!

The following css will show the buttons (they were hidden for me as well):

.cssClosed {
background:url('/_layouts/images/Menu-right.gif') no-repeat 140px 7px;
}

.cssOpen{
background:url('/_layouts/images/Menu2.gif') no-repeat 130px 7px;
}

Anonymous said...

Thank you for building such nice solution... I am hooked up with issue that the parent toggle is not navigation to its respective page it only toggle and shows the child nodes but I want the parent node to navigate to its URL. Can you please try and help me on this.

Anonymous said...

Oh my goodness! Incredible article dude! Thank you, However I am having troubles with your RSS.

I don't understand the reason why I cannot subscribe to it. Is there anybody getting similar RSS problems? Anyone that knows the answer can you kindly respond? Thanks!!

my web page - http://www.biotechnologyreview.net

Unknown said...

This is what I am looking for! However, i am very new to sharepoint. Can someone please tell me where to put this code. I have a css file since I really don't want to mess with my master page. How do I format this for my css file or is that possible,.
Thanks

Unknown said...

This is what I am looking for! However, i am very new to sharepoint. Can someone please tell me where to put this code. I have a css file since I really don't want to mess with my master page. How do I format this for my css file or is that possible,.
Thanks

Anonymous said...
This comment has been removed by a blog administrator.