About two months ago, a colleague of mine told me of a requirement he had to build an accordion-style menu for an intranet MOSS portal he was building. Not knowing where to start, he asked me what he could do. I advised him that he could either try to work with the <SharePoint:AspMenu> control used by the Quick Launch out of the box or he could use the Accordion control found in the AJAX.NET Control Toolkit and (combined with the SharePoint navigation providers), he could roll his own menu control. They never got around to actually doing this as more critical requirements came about and they eventually postponed this accordion-style menu to a later phase.
So, being as excited as I was, I started to dream up some ideas I had on how I could use jQuery. I have kicked around a few ideas with some of my colleagues and acquaintances and the ones they thought were good ideas, I will start to build during the upcoming days and months. I will release the code either here (if it is just small snippet code) or in CodePlex if I build out libraries or toolkits. But yesterday, as I was laying in my bed freezing (it was 45 degrees in my house because my furnace went out and had to be repaired this morning), I thought about the accordion control my colleague mentioned. I thought to myself, now this is something I think could do quickly with jQuery. So today, as I waited for the service guy to fix my furnace and for my new treadmill to be delivered, I wrote some jQuery code to make the SharePoint Quick Launch menu work like an accordion.
By default, the following image is the default appearance of the Quick Launch menu in my dummy test portal:
My accordion would function as follows (the UI requirements, if you will):
- Only one sub menu at a time should be visible.
- If you click on a site's navigation bar (item B), the sub menu (item c) should appear and all other sub-menus would disappear.
- If you click on a site's navigation bar to attempt to expand the sub-menu but the site has no sub-items, nothing should happen (the currently visible sub-menu should still remain).
- Clicking on the site link (item A) should still continue to take you to the site.
- By default, when the page is first rendered, the current site the user is on should have its sub-menu expanded out.
Some highlights and explanations of the code:
Finding each sub menu
//For each Quick Launch navigation sub menu:
//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.
//otherwise, hide the submenu
When the page is first rendered, the above snippet finds each sub-menu and automatically hides or displays them based on the UI requirements above. A sub-menu item link that is selected will have the 'ms-selectednav' CSS class applied. Similarly, if the user is currently on the welcome page of a site that appears on the Quick Launch, the 'ms-selectednavheader' CSS class will be applied to the corresponding table element in the Quick Launch html.
Handling a site's link (item A) click event
//When a user clicks a navigation header, the user should be taken directly
//should not be triggered.
Event handler for site menu items
//Finally, this adds a click event handler for the navigation header table
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.
The above snippet adds an event handler to handle clicks on the table. And the final output of this code is:
Portal home page (on first load)
Portal home page (News expanded)
Portal Home Page (Search expanded)
Portal Home Page (Sites expanded)
News Home Page
Sub link Page