Paul Grenier set out on a mission; a mission to create an accordion-style left navigation menu for my WSS test site. Mission complete. If you can copy/paste, you can see it in action. Since I used Google’s API to load jQuery, you don’t even need to download the library file.
First, look at your left nav. If you changed it from the out-of-the-box setup, make sure you have “headers” and “submenus” that make sense. For example, Documents should appear on top of a bulleted list of document libraries.
|
|
Obviously, if you want the accordion-style menu for all pages, you should work it into the default.master. For now, we can work with a test page by adding a Content Editor Web Part (CEWP) to the page. Add the code below to the web part’s Content Editor (source). Now your menu should look like this. |
| |
|
When you click on the menu header box with the down arrow image, it exposes the submenu below it and swaps the image with an ‘x’. Likewise, clicking the header with the ‘x’ will hide the associated submenu. |
| |
|
|
Here’s the code:
[code:js]
<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>
[/code]