I needed to customize my quick launch so that
- The very top level has a different style from its children
- Only display one level down at once, other nodes are collapsed
- Add indent between levels.
- 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:
Drift Bottle 