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:

$(document).ready( 
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             
subList.toggle();                  
});  
/*End toggle quick launch*/
});

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

Advertisements

One thought on “Use jQuery to customize Quick Launch in SharePoint 2010

  1. doesent work for me 😥
    in the first Level, nothing is collapsed….

    dont know, if the jquery work fine… insert it with an CEWP?!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s