The standard Quicklaunch menu or the <SharePoint:AspMenu> has some limitations regarding layout and dynamic display… Microsoft has released the code to the menu in order to make the menu more customizable (The reason for the publication of the source code is the the fact that the control is marked as sealed and is therefore not eligible to be used as the base class for derived types.) Read my other post on how to use this code to highlight the selected menu items.
When using a WSS environment the menu has further limitations regarding the url of a root element. The “problem” is that all menu items must have a url. The easy fix for this is to make all your level one URL’s like “/#” This will result in a link to the same page, but there will be a postback when a user clicks on the link.
In some scenarios you do not want, or you can not modify SharePoint using Features and compiled code.
So how do we modify the menu without writing any C# code? We use the JQuery library to parse and tweak the HTML already generated by the aspmenu control
The main part of the JQuery code is made by Paul Grenier and filed at EnduserSharePoint.com. Be sure to check out the other JQuery and SharePoint related articles!
The solution looks like this when finished
To make the menu look like this I used one JavaScript library, a modified CSS file and a modified Masterpage. The masterpage modifications is minor and not a part of the dynamic experience…
The masterpage was modified to link to the two java libraries used, one for the JQuery library and one for the script from Paul Grenier.
I have modified the script a little in order to make the empty headers act as you clicked on +/- (The modifications are simple and can surely be made better, but it is my first JQuery Code)
When a link is modified in SharePoint Services and the address is /#! the link will not behave like a normal link but expand/collapse instead.
This was a big eye opener and definitely my start down the “JQuery Lane” It is so much you can do with so little code…
The files used can be downloaded here
No comments:
Post a Comment