Turning Quick Launch in to a Tab control


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 nav quick launch in to a nifty tab control. The use case for this, was 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 in to tabs? The answer is pretty simple :)

Before we get in to the details of how to build this lets 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, standard html. UL’s with nested LI’s and some span’s for consistently styling the label’s. 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.

So, 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>
  1. No comments yet.
(will not be published)


%d bloggers like this: