Tweaking the Quicklaunch menu with JQuery

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

Modifying MOSSMenu to keep selected item highlighted

The SharePoint Team has released the source code to the SharePoint menu class. (MossMenu). I have modified the source to make the selected item stay selected during a postback.

The solution is a modification of a blog entry in Itay Shakury's blog.

In my sites I do not have menu items pointing to specific views in lists etc. (If I change the default view the menu item still shows the default view) So SharePoint will rewrite my url.

Ex: SharePoint will “UrlRewrite” the following url

http://server/site/Listname/

into

http://server/site/Listname/Forms/My%20Default.aspx

Another example of UrlRewrite is when you specify a folder in a document list. I will not provide a full example url because it contains a lot of characters:

http://server/site/listname/Forms/My%20DefaultView.aspx?RootFolder=http%3a%2f%2fsite...

The good part is that the parameter RootFolder (in my case) is the same as I specified in my menu item. So instead I compare the value of the parameter

Here is the code to handle the UrlRewritings:

(See Itay Shakury's blog on where to insert the code, you must modify the OnMenuItemDataBound function)

if (Page.Request.Url != null)

{

String UrlToCheck = Page.Request.Url.ToString().ToLower();

String UrlOnItem = e.Item.NavigateUrl.ToLower();

String UrlPathParam = String.IsNullOrEmpty(Page.Request["rootfolder"]) ? "" : Page.Request["rootfolder"].ToLower();

Boolean ItemSelected = false;

UrlOnItem = UrlOnItem.Replace(SPContext.Current.Site.RootWeb.Url, "");

UrlToCheck = UrlToCheck.Replace(SPContext.Current.Site.RootWeb.Url, "");

if (UrlPathParam.Length != 0)

UrlPathParam = UrlPathParam.Replace(SPContext.Current.Site.RootWeb.Url, "");

UrlOnItem = Page.Server.UrlDecode(UrlOnItem);

UrlToCheck = Page.Server.UrlDecode(UrlToCheck);

if (UrlPathParam.Length != 0)

UrlPathParam = Page.Server.UrlDecode(UrlPathParam);

if (UrlToCheck == UrlOnItem UrlOnItem == UrlPathParam)

{

ItemSelected = true;

}

else if (UrlToCheck.Contains("/forms/")) // Check if the url is without the forms/pagename

{

UrlToCheck = UrlToCheck.Substring(0, UrlToCheck.IndexOf("/forms/") + 1);

if (UrlToCheck == UrlOnItem)

{

ItemSelected = true;

}

}

e.Item.Selected = ItemSelected;

}