Use jQuery to customize Quick Launch in SharePoint 2010

I needed to customize my quick launch so that

  1. The very top level has a different style from its children
  2. Only display one level down at once, other nodes are collapsed
  3. Add indent between levels.
  4. When a link is selected, it will lose the URL and toggled when clicked

Things I had to do to get this:

SharePoint Navigation Setting, CSS and jQuery

Final look:

SharePoint Navigation Setting:

Change the navigaion settings at Site Actions->Site Settings->Look and Feel->Navigation->Current Navigation

Top navigation setting: (E.g “Our Science” level)

Second level setting: (E.g “Animal performance, Plant & forage, Land & environment” level)

Third level setting: (E.g. “Reproduction”, “Genomics”, “Growth & development” level)
In this case, the next level below this are all pages, not subsites, so no need to change the settings for the next level down.

CSS used to style the quick launch:

/* |--------- Quicklaunch -----------| */ 
.s4-ql ul.root ul { margin-bottom:5px; } 

/* Outher nav element */ 
#s4-leftpanel-content{ background-color:#fff!important; border:1px #d8d6d7 solid!important; border:0px!important } 

/* Inner nav element */ 
.menu-vertical { padding-right:10px!important; padding-left:10px!important; } 

/* Inner Inner nav element */ 
.menu-vertical > ul.root { padding-top:3px; } 

/* Level 1 static item and hover state */ 
.menu-vertical > ul.root > li.static > .menu-item{padding-left:0px!important; padding:1px!important; color:#333!important; } 
.menu-vertical > ul.root > li.static > .menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/* Level 2 static item and hover state */ 
.menu-vertical > ul.root > li.static > ul.static > li.static >.menu-item{ padding-left:0px!important; padding:1px!important; color:#333!important;  font-weight:bold; } 
.menu-vertical > ul.root > li.static > ul.static > li.static >.menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/* Level 3 static item and hover state */ 
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.static > li.static >.menu-item{ padding-left:0px!important; padding:1px!important; color:#333!important; } 
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.static > li.static >.menu-item:hover{  text-decoration:none;  color:#8cc63e!important; }

/*Level 1 selected item - Level1 include Our Science, Animal performance, Plant & forage etc */ 
.menu-vertical > ul.root > li.selected > .menu-item{ background-color:transparent!important; border:0px; margin:0px; padding:0px;  color:#8cc63e!important; }

/*Level 2 selected item*/ 
.menu-vertical > ul.root > li.static > ul.static >li.selected > .menu-item{ background-image:none!important; background-color:transparent; border:0px; margin-top:1px;  color:#8cc63e!important; }

/*Level 3 selected item*/ 
.menu-vertical > ul.root > li.static > ul.static >li.static > ul.static >li.selected >.menu-item{ background-image:none!important; background-color:transparent!important; border:0px; margin:0px; padding:0px;  color:#8cc63e!important; }

/* Sublinks margins */ 
.menu-vertical > ul.root > li.static > ul.static  { margin-top:5px; margin-bottom:5px; }

/* no border for the QL when no links */ 
.s4-specialNavLinkList { border:0px } 

/* Liststyle square */ 
.s4-ql ul.root ul > li  { list-style:square inside !important; list-style-position:outside !important; margin-left: 23px !important; padding-top:0px; } 

/* Liststyle square links */ 
.s4-ql ul.root ul > li > a { display: inline-block!important; padding-top:0px; padding-bottom:5px!important; padding-left:0px!important; vertical-align:top!important; }

jQuery used:

function() {
/*Toggle quick launch*/
//Hide all children         
$('.s4-ql li ul').hide(); 
//Remove the url from the selected item 
$('.s4-ql .selected').removeAttr('href');

//Add class to selected item so it can be toggled when click
$('.s4-ql .selected a').addClass('min');

//Display the selected items parents nodes 
$('.s4-ql .selected').parent().parent().show();
$('.s4-ql .selected').parent().parent().parent().show();

//Display the selected item's immediate child
$('.s4-ql ul li.selected').find('ul:first').show();

//In the root level, the heading and it's children are considered to be the same level, 
//to distiguish them, the first child will have bold font and black bottom border
//and other children will have a left indent and a black arrow in front of them.
$('.s4-ql ul.root').find('li:first').css({'font-weight':'bold', 'border-bottom':'1px black solid'});
$('.s4-ql ul.root').find('li:first').siblings('li').css({'padding-left':'20px', 'background':'url(\'/Style Library/Ag_Custom/images/arrow.png\') no-repeat 5px 5px;'});

//Setup Click Hanlder for min class       
$('.min').click(function() { 
//Traverse the DOM to find the child UL node             
var subList = $(this).siblings('ul'); 

//Toggle the UL             
/*End toggle quick launch*/

Here is how I used the Developer’s Tool in IE9 to select the items:


Add different background for each link in the global navigation menu in SharePoint 2010

I needed a global navigation that has different styles for each of the link in the navigation, for example in the following image:

First I checked out Randy Drisgill’s article – Using simple rendering in SharePoint Navigation. From this article, I learnt that if UseSimpleRendering=”True”  in the <SharePoint:AspMenu> control, the navigation menu uses a cleaner unordered HTML list. If it’s set to False, then the old less clean Table based navigation is used

To make each link have different styles, I did the following:

  1. In the master page, set UseSimpleRendering=”False”
  2. Each of the links will have a id, can use these ids to style the look. Use the Developer’s Tool from IE to find these ids.
  3. In the master page style sheet, I added these code
    /*style of All links in global navigation*/
    a.zz1_TopNavigationMenuV4_1 {color:#000; font-weight:bold; padding:5px 33px 5px 33px;}
    /*Second level whole style*/
    .zz1_TopNavigationMenuV4_0 {margin-top:5px;}
    /*To make each item in the top level having different top border color*/
    #zz1_TopNavigationMenuV4n0{border-top:5px #99CE58 solid;}
    #zz1_TopNavigationMenuV4n0 + td{display:none;}/*remove white space between links*/
    #zz1_TopNavigationMenuV4n0 a:hover{color:#99CE58;}
    #zz1_TopNavigationMenuV4n1{ border-top:5px #599AC6 solid;}
    #zz1_TopNavigationMenuV4n1 img{ display:none}/*remove dropdown arrow when there is dropdown list*/
    #zz1_TopNavigationMenuV4n1 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n2{ border-top:5px #00BDDD solid;}
    #zz1_TopNavigationMenuV4n2 + td{display:none;}
    #zz1_TopNavigationMenuV4n2 a:hover{color:#00BDDD;}
    #zz1_TopNavigationMenuV4n3{ border-top:5px #AAB383 solid;}
    #zz1_TopNavigationMenuV4n3 img{ display:none}
    #zz1_TopNavigationMenuV4n3 a:hover{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n3Items{color:#AAB383 ;}
    #zz1_TopNavigationMenuV4n4{ border-top:5px #6DC9CB solid;}
    #zz1_TopNavigationMenuV4n4 + td{display:none;}
    #zz1_TopNavigationMenuV4n4 a:hover{color:#6DC9CB ;}
    #zz1_TopNavigationMenuV4n5{ border-top:5px #3B637E solid;}
    #zz1_TopNavigationMenuV4n5 img{ display:none}
    #zz1_TopNavigationMenuV4n5 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n5Items{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n6{ border-top:5px #836252 solid;}
    #zz1_TopNavigationMenuV4n6 img{ display:none}
    #zz1_TopNavigationMenuV4n6 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n7{ border-top:5px #AAAAA0 solid;}
    #zz1_TopNavigationMenuV4n7 a:hover{color:#AAAAA0;}
    /*Second level links having different hover state*/
    #zz1_TopNavigationMenuV4n8 {height:20px;}
    #zz1_TopNavigationMenuV4n8 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n9 {height:20px;}
    #zz1_TopNavigationMenuV4n9 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n10 {height:20px;}
    #zz1_TopNavigationMenuV4n10 a:hover{color:#599AC6;}
    #zz1_TopNavigationMenuV4n11 {height:20px;}
    #zz1_TopNavigationMenuV4n11 a:hover{color:#AAB383;}
    #zz1_TopNavigationMenuV4n12 {height:20px;}
    #zz1_TopNavigationMenuV4n12 a:hover{color:#3B637E ;}
    #zz1_TopNavigationMenuV4n13 {height:20px;}
    #zz1_TopNavigationMenuV4n13 a:hover{color:#836252;}
    #zz1_TopNavigationMenuV4n14 {height:20px;}
    #zz1_TopNavigationMenuV4n14 a:hover{color:#836252;}

    Note: if there are more then one level in the navigation, the other levels’ code will be after the table of the first level in the source code the the master page.