This post describes how to customize the standard Quick Launch in SharePoint by using SharePoint Designer 2010.

Branding the Quick Launch with only CSS could be a bit tricky and it takes a little while to become a friend with the markup of this navigation and have it to look the way you want. This first article in a series of two will show you how to create a simple custom look and feel with only CSS code. If you need to create a more advanced design for the Quick launch than you can do with just CSS, the alternatives is to manipulate the DOM with jQuery or using plain HTML with CSS and background images. Besides of this, CSS 3 comes with some exiting features like box shadow and border radius that lets you create stuff like boxes with curved corners but it’s not an option here because we need to render the master page in IE8 mode to get all functionalities intact in SharePoint 2010. I hope this post gives you some ideas and inspirations for branding the quick launch in the way you want.

Let’s go

Open SPD, create a custom master page and include a reference to an external CSS file. Paste the following CSS code in your custom CSS file. Save and publish the files and apply the master page to a site or your site collection. Use the browser and go to a site where you can see a Quick Launch to verify the changes. This first example uses a list style background image for the sub items. You can download the arrow icon here.

CSS

Add this CSS in your custom CSS file, don’t forget to change the path to the arrow icon to the folder where you put the image:

/* |--------- 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;
}
/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #555 solid!important;
padding:1px 1px 1px 0px!important;
color:#333!important;
}
/* Sublinks */
.menu-vertical > ul.root > li.static > ul.static  {
margin-top:5px; margin-bottom:5px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a > span > span {
margin-top:2px
}
/* Selected */
.menu-vertical > ul.root > li.selected > a {
background-color:transparent!important;
border:0px; margin:0px; padding:0px;
}
.menu-vertical > ul.root > li.static > ul.static > li > a.selected {
background-image:none!important;
background-color:transparent;
color:green!important;
border:0px; margin-top:1px;
}
/* no border for the QL when no links */
.s4-specialNavLinkList {
border:0px
}
/* Liststyle square */
.s4-ql ul.root ul > li  { 
padding-top:0px; 
background-image:url('/Style Library/WordPress/Images/Arrow-Right.png');
background-repeat:no-repeat;
background-position:0.0em;
}
/* Liststyle square links */
.s4-ql ul.root ul > li > a { 
display: inline-block!important; 
padding-top:0px;
padding-bottom:0px!important; 
padding-left:0px!important;
margin-left:16px;
vertical-align:top!important; 
}

Another example

If you want to display more levels in the Quick Launch you can set the display level to three, MaximumDynamicDisplayLevels=”3″ for the SharePoint Asp menu in the master page. Look for the menu control with the ID V4QuickLaunchMenu. In this example I have used list-style squares instead of the arrows.

Add this CSS in your custom CSS file:

/* |--------- 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;
}
/* mainlinks */
.menu-vertical > ul.root > li.static > .menu-item{
border-bottom:1px #555 solid!important;
padding-left:0px!important;
padding:1px!important;
color:#333!important;
}
/* Sublinks margins */
.menu-vertical > ul.root > li.static > ul.static  {
margin-top:5px;
margin-bottom:5px;
}
/* Selected */
.menu-vertical > ul.root > li.selected > a {
background-color:transparent!important;
border:0px; margin:0px; padding:0px
}
.menu-vertical > ul.root > li.static > ul.static > li > a.selected {
background-image:none!important;
background-color:transparent;
color:green!important;
border:0px; margin-top:1px;
}
/* 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; 
}
/* If 3 lvl in QL */
/* Wrapper for all Items in lvl 3 */
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic {
position:relative;
left:-8px!important; 
top:1px!important;
padding-left:0px
}
/* Wrapp each Item in lvl 3 */
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic > li.dynamic {}
.menu-vertical > ul.root > li.static > ul.static > li.static > ul.dynamic a:hover {}
.menu-vertical > ul.root > li.static > ul.static > li.dynamic-children > a.dynamic-children > span.additional-background {
background-image:none
}
/* Items in level 3*/
.menu-vertical > ul.root > li > ul > li > ul > li > a.selected > span > span  {
padding-left:5px!important
}
/* Item lvl 3 - get all subItems from the last available DOM defined selected Item */
.menu-vertical > ul.root > li > ul > li.selected > ul > li > a > span > span {}

Read more about customizing the Quick Launch at MSDN library How to: Customize the Display of Quick Launch

In the next blog post I’ll show you some more examples how to customize the quick launch with stuff like rounded corner & borders and how to expand / collapse the Quick Launch with help of jQuery. Stay in tune!

/ Christian

About these ads