'Go To' Menu - Sig's Style

OK; I have been holding out on you guys.

A couple of months back I was talking to Sig, and we were discussion how the entire navigation story in SharePoint can be improved. This was the discussion that started this off for me. But he happened to show me a couple of alternatives that he was working on. And this one really caught my eye. I'm talking about the 'Go To' menu on the top left. Now Sig's version there is a DVWP with some super JavaScript to crawl the DOM and build the contents of the Quick Launch in the form of an IE Menu. The beauty of the Go To menu for me is that, you can hierarchically group items, and jump to them without having to endure many post-backs or page loads.

Now here's my spin on it. Remember the Tab Navigation through a DVWP I showed you guys sometime back. Well along those lines, wont be neat to build that Go To menu based on a list or document library.

Here's what I got.

!(/images/tariq/23043/618fc075-o_menu.jpg)

OK so how do you do it? First off the SharePoint menu above (or ie:menu as I call it) is already built in to SharePoint. you only need to call the proper js function, and have the menu contents (in xml) loaded on the page. More information on the ie:menu can be found on this post by Dustin Miller.

So building that on a DVWP is almost the same as the Tab Strips; just using a different JavaScripts.

So whats the run down? Well basically my implementation uses each column in the list as level in the menu, so for instance the first level of the menu is actually a column called Category that is used to group a bunch of links. Here's a what the list looks like (yes I am using a list, you can do a document library if you want;) )

!(/images/tariq/23043/54bc8428-o_list.jpg)

Now the DVWP; Its a simple DVWP, I have grouping set on the Category Column with Show Groupheader and Groupfooter both set (You will see the reason for this later). That actually gives us 4 call templates in the Xsl corresponding to the 3 main sections of the menu (i.e. the link to launch the menu, the first level of the menu, and the second level of the menu). 4 because grouping header has a call template, and grouping footer has another call template.

the xsl templates are

<xsl:template name="dvt_1"> <- The main section responsible for calling the other templates.

<xsl:template name="dvt_1.body"> <- The template responsible for most of the body rendering.

<xsl:template name="dvt_1.groupheader0"> <- The template responsible for displaying the groupheader

<xsl:template name="dvt_1.groupfooter0"> <- The template responsible for displaying the groupfooter

So in the dvt_1 template you would initialize most of you JavaScript variables, place a link to the pull down menu, and create a layer that would host the menu contents (i.e. in xml format)

<xsl:template name="dvt_1"> <xsl:variable name="StyleName">Table</xsl:variable> <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/> <xsl:variable name="RowCount" select="count($Rows)"/> <xsl:variable name="IsEmpty" select="$RowCount = 0"/> xsl:choose <xsl:when test="$IsEmpty"> <xsl:call-template name="dvt_1.empty"/> </xsl:when> xsl:otherwise

<!-- Create the link to the pull down menu -->