Updated: August 10 2011: SharePoint 2010 Collapsible Quick Launch
I am sure most of SharePoint Developers have started to use Jquery in SharePoint. In this post I am going to talk about how we can use JQUERY to make a collapsible QUICKLAUNCH MENU. Many organizations may have come across this scenario where you have a very long list of links on the QuickLaunch Menu and would love to have collapsible Headers for QuickLaunch. Hope this post will be a stop for your search.
1. Open the site in SharePoint Designer in which you want to make the QuickLaunch Collapsible.
2. Open the Master Page which resides in the catalog folder.
3. Copy and paste the given snippet above the end of head tag in the master page
4. Save and close master page changes
5. The QuickLaunch should look like this given below
Note: Hope you have internet connection for your development machine or else you may have needed to download the JQUERY scripts locally and add the references accordingly.
I am sure most of SharePoint Developers have started to use Jquery in SharePoint. In this post I am going to talk about how we can use JQUERY to make a collapsible QUICKLAUNCH MENU. Many organizations may have come across this scenario where you have a very long list of links on the QuickLaunch Menu and would love to have collapsible Headers for QuickLaunch. Hope this post will be a stop for your search.
1. Open the site in SharePoint Designer in which you want to make the QuickLaunch Collapsible.
2. Open the Master Page which resides in the catalog folder.
3. Copy and paste the given snippet above the end of head tag in the master page
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.2.6");
</script>
<script type="text/javascript">
$(function(){
//initialize menus
var menuRows = $("[id$='QuickLaunchMenu'] > tbody > tr");
var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
//set img path for when submenu is hidden
var closedImg = "/_layouts/images/Menu1.gif";
//set img path for when submenu is visible
var openedImg = "/_layouts/images/ptclose.gif";
var cssInit = {
"background-image": "url('"+closedImg+"')",
"background-repeat": "no-repeat",
"background-position": "100% 50%"
}
var cssClosed = {"background-image": "url('"+closedImg+"')"}
var cssOpen = {"background-image": "url('"+openedImg+"')"}
//hide submenus
menuRows.filter("[id='']").hide();
//apply initial inline style to menu headers
menuHd.find("td:last").css(cssInit);
menuHd.click(function () {
var styleElm = $(this).find("td:last")
var nextTR = $(this).next("tr[id='']");
if (nextTR.is(':visible')) {
nextTR.hide();
styleElm.css(cssClosed);
} else {
nextTR.show();
styleElm.css(cssOpen);
}
});
});
</script>4. Save and close master page changes
5. The QuickLaunch should look like this given below
Note: Hope you have internet connection for your development machine or else you may have needed to download the JQUERY scripts locally and add the references accordingly. 
11 comments:
I followed the steps which you have advised. But the code is not working. I am using sharepoint 2010
I had done this with MOSS 2007. what error are you getting when u tried this with SP2010?
I tried the exact steps which are suggested. There is no error on the page. But the style is not being applied to the Quick Launch!
I went throught the QuickLaunch on SP2010, i am sorry to say, this script does not work for SP2010. The way quick lauch is rendered in SP2010 is using DIV, UL and LI tags while in 2007 it was rendered in table format i.e. tr and td.
Hi Everyone..
GREAT tip by the way..
I have added some more funcitonality making the menu stay expanded after post back.
See code below:
//initialize menus
var menuRows = $("[id$='QuickLaunchMenu'] > tbody > tr");
var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
//set img path for when submenu is hidden
var closedImg = "/_layouts/images/Menu1.gif";
//set img path for when submenu is visible
var openedImg = "/_layouts/images/ptclose.gif";
var cssInit = {
"background-image": "url('"+closedImg+"')",
"background-repeat": "no-repeat",
"background-position": "100% 50%"
}
var cssClosed = {"background-image": "url('"+closedImg+"')"}
var cssOpen = {"background-image": "url('"+openedImg+"')"}
//hide submenus
menuRows.filter("[id='']").hide();
//apply initial inline style to menu headers
menuHd.find("td:last").css(cssInit);
var menuClickedOld = readCookie("Menu_Clicked");
//alert(menuClickedOld);
if(typeof menuClickedOld != 'undefined'){
$("table#zz2_QuickLaunchMenu a.ms-navitem").each(function()
{
if(menuClickedOld.indexOf($(this).parents("tr[id]").text()) > 0){
$(this).parents("tr[id]").parents("tr:first").show();
}
});
}
menuHd.click(function () {
var styleElm = $(this).find("td:last");
var nextTR = $(this).next("tr[id='']");
if (nextTR.is(':visible')) {
nextTR.hide();
styleElm.css(cssClosed);
} else {
nextTR.show();
styleElm.css(cssOpen);
//eraseCookie("Menu_Clicked");
var menuClicked = createCookie("Menu_Clicked",nextTR.text(),1);
}
});
});
function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/";} function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null;} function eraseCookie(name) { createCookie(name,"",-1);}function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
@Krillehbg: Thanks for the cookie snippet will definitely use it while creating collapsible quick launch for SharePoint 2010 which i will be posting soon.
@All: You can find the Collapsible QuickLaunch for SharePoint 2010 Here
anyone tried this with SharePoint 2007?
hi,
great solution, works fine for me with SP2007.
the only question, is there any way that direct click on title link will not open the sub-menu and redirect only?
I am using the version of collapsible menu without cookie and it works great.
Tried to move to the version with a cookie is not working for me.
any ideas?
Please let me know if this is possible in publishing master page with currentNav left navigation.
Thanks
Shailendra
Post a Comment