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:



2 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.