jQuery-Based Quick Launch Accordion
I’ve just added a new page to my Sympraxis Consulting demo site which shows how you can display an accordion effect on the Quick Launch. This page shows how you can change the behavior of a basic SharePoint page control with a little jQuery.
If you look at the Quick Launch on the page, you’ll notice that it is collapsed, not showing any of the lists or libraries for the site. The jQuery code uses the jQuery HoverIntent plugin and provides accordion-like behavior for the Quick Launch. The HoverIntent plugin is useful because it makes sure that you are really hovering over a header rather than just passing the cursor over on your way somewhere else.
Hover over any header to see how this behavior works. Depending on what browser you are using, you’ll probably see some flickering as the Quick Launch expands or collapses. This demo is more of a proof of concept, and in a real implementation you’d obviously want to clean that up.
As with all of my demos, the demo code is available for easy download through links on the demo page.
If there’s enough interest, I may tighten this up for inclusion in a future version of SPServices. If you’d be interested, leave a comment below!
I need help in entering the selectors in Sharepoint 2010 for a biz website in the left menu under the navigation:
Here is my code for QuickLaunchMenu in Sharepoint for my Web part Accordion menu:
http://www.deviantpoint.com/post/2009/01/16/Creating-an-accordion-style-SharePoint-Quick-Launch-menu-with-jQuery.aspx
& Here is my accordin.js file below
///
//Starts when DOM is ready
$(function(){
//For each Quick Launch navigation sub menu:
$(“table.ms-navSubMenu2″).each(function(){
//Find any navigation items under the sub menu that have been selected.
var selectedNavItems = $(this).find(“a.ms-selectednav”);
//Find the corresponding navigation header of the current sub menu being processed
var menuHeader = $(this).parents(“tr:eq(0)”).prev(“tr”).find(“table.ms-navheader:eq(0)”);
if ($(menuHeader).hasClass(“ms-selectednavheader”) || selectedNavItems.length > 0)
{
//if the navigation header for this sub menu is selected or if there are any
//selected navigational items in this submenu, show the submenu.
$(this).show();
}
else
{
//otherwise, hide the submenu
$(this).hide();
}
});
//When a user clicks a navigation header, the user should be taken directly
//to the site link. The javascript event handler to hide/display the submenus
//should not be triggered.
$(“a.ms-navheader”).click(function(e){
e.stopPropagation();
});
//When the user hovers over the navigation header, it would be nice
//to have an indicator that they can click on the header. Usually,
//browsers use the hand icon to indicate clickable items.
$(“table.ms-navheader”).hover(function(e){
$(this).css(“cursor”, “hand”);
}, function(e){
$(this).css(“cursor”, “default”);
});
//Finally, this adds a click event handler for the navigation header table
$(“table.ms-navheader”).click(function(e)
{
var subMenu = $(this).parents(“tr:eq(0)”).next(“tr”).find(“table.ms-navSubMenu2:eq(0)”);
if (subMenu.length > 0)
{
//only if we have a submenu should we hide the other submenus and show the current one.
$(“table.ms-navSubMenu2″).hide(“slow”);
subMenu.show(“slow”);
}
});
});
Any help????
How can I match this to make my QuickLaunch render in Sharepoint 2010?????
Anthony
Marc,
How and where can this be added on the page? Through CEWP in page or in master page? Do we need to use SharePoint designer?
HI,
can u please share source code ?
Thanks,
venkat
venkat:
As I say in the post, the code is available in the demo page.
M.