This post is the last one of two articles about some branding tips and tricks for the Quick launch in SharePoint 2010. In this article I’ll show you a simple way to add rounded corners with help of two background images at the top and bottom. Take a look at the first article here.

Let’s go – Example 1

Open your custom master page with SharePoint Designer and find the Sharepoint:SPNavigationManager control. Add the following DIV just above this control.

<div id="QLtopwrapper"></div>

When you complete this find the end tag of the </Sharepoint:SPNavigationManager> and add the following DIV just above this control.

<div id="QLbottomwrapper"></div>

Now you have everything in place in your custom master page as needed, so now it’s time to add some CSS. Copy the following CSS code and paste it into your external CSS file. As you can see I have used two background images. Make your own or download the Images I have used here. I have included my example master page in the download if you find it difficult to locate where you should place the top and bottom div.

/* |--------- Quicklaunch -----------| */
.ms-quickLaunch {padding-top:0px}
#s4-leftpanel-content{
background-color:transparent!important;
}
#s4-leftpanel-content {
border:0px!important;
background-color:transparent!important;
}
.s4-ql {
background-color:#fff;
margin-bottom:0px!important;
}
/* Inner nav element */
.menu-vertical {
padding:0px!important;
}
/* top rounded */
#QLtopwrapper {
background:url('/Style%20Library/Branding/Images/QLtop.png') repeat-x;
height:19px;
width:220px;
}
/* bottom rounded */
#QLbottomwrapper {
background:url('/Style%20Library/Branding/Images/QLbottom.png') repeat-x;
height:19px;
width:220px;
}
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #929292 solid!important;
padding-left:0px;
color:#fff;
font-family:Arial;
font-size:11px;
font-weight:bold;
background-color:#8c8c8c!important;
background-color:#8C8C8C!important;
}
/* Selected */
.s4-ql a.selected {
background-color:transparent;
background-image:none;
border:1px transparent solid!important;
color:#fff!important;
}
/* no border in teamsites */
.s4-ql,.s4-specialNavLinkList{
border:0px!important;
}
.menu-vertical > ul.root > li.static {
padding:0px!important; margin:0px!important;
}
/* headers */
.menu-vertical > ul.root > li.static > a.menu-item {
padding:10px 4px 10px 5px;
border-bottom:1px #ccc solid;
}
/* headers selected for publishing sites */
.menu-vertical > ul.root > li.static > a.selected {
padding:10px 4px 10px 3px;!important;
padding-left:4px!important;
background-color:#777!important;
}
/* Subitem container */
.menu-vertical > ul.root > li.static > ul {
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}
/* SubItems wrap */
.menu-vertical > ul.root > li.static > ul.static > li.static > a  {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
padding:10px 4px 10px 8px;
color:#ccc!important;
}
/* SubItems  */
.menu-vertical > ul.root > li.static > ul.static > li.static > a > span > span {
color:#333;
text-decoration:none!important;
}
/* SubItems hover */
.menu-vertical > ul.root > li.static > ul.static > li.static a:hover {
text-decoration:none!important;
}
/* Selected SubItems  */
.menu-vertical > ul.root > li.static > ul.static > li.selected > a.selected {
background-color:#fff;
border:1px transparent solid!important;
padding-left:10px!important;
}
/* Selected SubItems  */
.menu-vertical > ul.root > li.static > ul.static > li.selected > a.selected > span > span {
color:#000;
}
.menu-vertical > ul.root > li.static > ul.static > li {
border-bottom:1px #8C8C8C solid!important;
}

Let’s go – Example 2

In this example I’ll use a jQuery script to get a simple and basic expand and collapse function in a specific scenario. Let’s say you have the setting “Display only the navigation items below the current site” for some site and have added headings and link manually. You can then use jQuery to toggle the headings. This behavior the jQuery script gives with the current navigation settings may not be suitable for all sites in the collection for you; this example is just build for this specific case and you can use it locally just on a single page if you prefer to.

Here’s the jQuery

$(".menu-vertical > ul.root > li.static > ul.static").css("display","none");
$(".menu-vertical > ul.root > li.static").css("background","url('/_layouts/images/plus.gif') no-repeat 3px 12px");
 
toggle();
function toggle() {
$(".menu-vertical > ul.root > li.static > a").toggle(
function () {
$("> ul", $(this).parent()).show("fast");
$($(this).parent()).css("background","url('/_layouts/images/minus.gif') no-repeat 3px 12px");
},
function () {
$("> ul", $(this).parent()).hide("fast");
$($(this).parent()).css("background","url('/_layouts/images/plus.gif') no-repeat 3px 12px");
});
}
$sel = $('.menu-vertical > ul.root > li.static > ul.static > li.selected');
if($sel.length) {
$sel.parent().css("display", "block");
$sel.parents().eq(1).css("background","url('/_layouts/images/minus.gif') no-repeat 3px 12px");	
}

Here’s the CSS

/* |--------- Quicklaunch -----------| */
.s4-ql A.selected {
background-color:transparent;
border:0px!important;
}
/* Inner nav element */
.menu-vertical {padding:10px; padding-left:0px}

/* Headers */
.menu-vertical > ul.root > li.static > a > span > span.menu-item-text {
border-bottom:1px #ccc solid;
padding-left:5px; color:#333;
padding-bottom:5px; padding-top:5px;
}
/* Sublinks */
.menu-vertical > ul.root ul > li > a {
padding-left:15px; color:#333; 
}
/* Sublinks hover */
.menu-vertical > ul.root ul > li > a:hover{
color:#009BA4; text-decoration: underline
}
/* Sublinks top and bottom */
.menu-vertical > ul.root ul {
margin-top:5px; margin-bottom:5px;
}
/* Sublinks selected */
.menu-vertical > ul.root > li.static > UL.static > li.selected > a.menu-item > span.additional-background{
margin-left:6px!important
}

Thanks & stay in tune!

/ Christian