Turning Quick Launch into a Tab control

Slalom Consultant Maarten Sundman

Slalom Consultant Maarten Sundman specializes in .NET, SharePoint, and Silverlight solutions and has experience in the Financial Services, Software, and Utilities and Energy sectors.

First, let me start this post by saying that I absolutely love that navigation in SP2010 is completely standard HTML. This is a ‘codeless’ method for turning that left navigation quick launch in to a nifty tab control. The use case for this was that for some landing pages people wanted tabs rather than quick launch but for everything else the normal quick launch. So how do you change the quick launch as needed to tabs? The answer is pretty simple.

Before we get into the details of how to build this, let’s take a step back and look at what the quick launch HTML looks like:

<UL class="root static">

<LI class=static>
<A class="static menu-item" href="/_layouts/viewlsts.aspx?BaseType=1">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Libraries</SPAN>
</SPAN>
</A>

<UL class=static>

<LI class=static>
<A class="static menu-item" href="/SitePages">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Site Pages</SPAN>
</SPAN>
</A>
</LI>

<LI class=static>
<A class="static menu-item" href="/Shared%20Documents/Forms/AllItems.aspx">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Shared Documents</SPAN>
</SPAN>
</A>
</LI>
</UL>
</LI>

<LI class=static>
<A class="static menu-item" href="/_layouts/viewlsts.aspx?BaseType=0">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Lists</SPAN>
</SPAN>
</A>

<UL class=static>

<LI class=static>
<A class="static menu-item" href="/Lists/Calendar/calendar.aspx">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Calendar</SPAN>
</SPAN>
</A>
</LI>

<LI class=static>
<A class="static menu-item" href="/Lists/Project%20Tasks/gantt.aspx">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Project Tasks</SPAN>
</SPAN>
</A>
</LI>

<LI class=static>
<A class="static menu-item" href="/_layouts/viewlsts.aspx?BaseType=0&amp;ListTemplate=108">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Discussions</SPAN>
</SPAN>
</A>

<UL class=static>

<LI class=static>
<A class="static menu-item" href="/Lists/Team%20Discussion/AllItems.aspx">
<SPAN class=additional-background>
<SPAN class=menu-item-text>
Team Discussion</SPAN>
</SPAN>
</A>
</LI>
</UL>
</LI>
</UL>

Pretty clean and standard HTML. UL’s with nested LI’s and some SPAN’s for consistently styling the labels. Because of how clean this HTML is, it’s dead simple to extract this using jQuery and then have it appended somewhere on the page with some custom styling.

Time to pull out your jQuery utility knife and do something like this (for re-use as needed toss this in to a content editor web part). We just grab the inner HTML of the quick launch navigation, hide the left panel, adjust the margins of the primary content region to be flush with the left side, and append the inner HTML we grabbed to the specified DIV:

<style>
div#quickTabControl > UL.static LI {
	BACKGROUND: url(/_layouts/images/MYIMAGE.JPG) #e6eff2;  FLOAT: left; BORDER:white 1px solid; PADDING-TOP: 8px; font-weight:700;
}
div#quickTabControl > UL.static {
	LIST-STYLE-TYPE: none
}
div#quickTabControl > UL.static > LI.static A, div#quickTabControl > UL.static > LI.static A:visited, div#quickTabControl > UL.static > LI.static A:hover {
	COLOR: white
}
BODY #s4-leftpanel {display:none !important;}
.s4-ca { margin-left:0px !important;}
</style>
<script>
$(document).ready(function()
{
	var quickLaunch = $('div.s4-ql > div').html();
	$('div#quickTabControl').append(quickLaunch);
});
</script>
<div id="quickTabControl"></div>
Slalom Consulting’s San Francisco office Slalom Consulting's Collaboration focus
Learn more about our San Francisco office Learn more about Slalom Consulting Collaboration

subscribe by emailSubscribe to follow new Collaboration posts

One Response to Turning Quick Launch into a Tab control

  1. I have been searching for this information for quite some times. About three hours of online searching, at last I found it in your blog. I wonder why Yahoo dont display this kind of good websites in the first page. Usually the top search engine results are full of rubbish. Perhaps its time to use another search engine.

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

%d bloggers like this: