Guest Author: Peter Allen
BitsOfSharePoint

My solution for A Global Navigation Solution across Site Collections has been upgraded to version 2.0.  If you have not read my previous posts on this topic please check them out:

• Article I – SharePoint – A Global Navigation Solution across Site Collections
• Article II – SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment

In version 2.0 I have streamlined the code and reduced the number of lists needed to create the pull downs and now use a list for creating the tabs.  So once you set it up you can easily add tabs and pull downs to a tab, by simply updating the tabs list or the pull down list and all site with this solution will see the changes.

I have also refined the tabs to show the when there is a pull down.  Also, pull downs now can have popup descriptions for each listed item, if you like.  All you need to do is populate the Notes field in your pull down list, unpopulated notes will show nothing.

If you have not implemented this solution yet then follow all the steps listed below.  If you have implement my version 1.0, the changes you will need to make are updating the code in the topnavigation.js file and create two new lists for your tab and pull down.  Your infrastructure, code you added to your masters pages, you created does not need be changed at all.

Let take a look at version 2.0 changes.  Below is an image of how the pull downs can look showing all the features.

Version 2.0 Global Navigation Features

In version 2.0 I have added MOSS features and as a result the following features were added:

• Pull Down icon will only appear on those that you indicate have a pull down.  So now you can have a standard tab or a tab with a pull down where the will show indicating there is more to view.


• By adding comments in the notes section of the links, they will then become pop-ups when you hover over a link.


• New version only requires one list for the tabs and one list for all the pull downs.

When I implemented this on my site www.bitsofsharepoint.com I created a site where I housed all of the lists and libraries.  Below is an image of the what a proper implementation would look like.  You will notice we have the two lists for tabs and pull downs, and we have the Scripts library where our three scripts are housed.

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

Now let’s create and implement the solution.  Below are the components that you will need.  Though this may look like a lot, it is very simple.  Add three lists and libraries, add code to your master page, change code in a script file, and add your tabs and pull downs to the lists and that is it.

Components needed:

1. SharePoint Resource Site
2. SPServices by Marc Anderson
3. jQuery
4. SharePoint Designer to edit Master Pages
5. SharePoint Links List for Tabs and Pull Downs
6. Solution Code

1) SharePoint Resource Site
I recommend that if you do not already have a site collection devoted to scripts and lists that will be accessible by all, that you create one.  This site collection will allow you to have document library where you can house your scripts like jQuery and SPServices.  It will also allow you to create lists as needed for example the one we will create to manage the pull down items in our tab.

So there should be a site collection where we house the below files and list and that has permissions set to all authenticated members as read only. For purposes of this article I will call this site collection Resources. I wrote an article along these lines and here it is: http://www.bitsofsharepoint.com/BlogPoint/Lists/Posts/Post.aspx?ID=29

2) SPServices by Marc Anderson
We need to download the SPServices file that Marc Anderson has put together.  You can find it here: http://spservices.codeplex.com/ This file will be used by the script for this solution, so this will need to be added to the document library where you keep scripts.  In my case it would go into the document library in my Resources site collection.

Recommendation is to change the name of the file name so that it does not have a version number and should look like this, “jquery.SPServices-latest.min.js”.  This will allow you to update in the future to Marc’s latest version without having to go back to each master page and change to the new version name.

3) jQuery
There are two ways to work with a jQuery file.  You have a choice of downloading the latest version and putting it in scripts document library or you can point to Google’s version which will always be the latest version.  This is a choice that you will make.   You can download jQuery from here: http://jquery.com/

I would then add this script to me document library in my Resources site collection.

4) SharePoint Designer to edit Master Pages
You will need to have access to SharePoint Designer and be able to edit the Master Pages on the sites you want the global navigation tab to show up on.  When you edit a master page you will want to add the following code between the <header></header> tags as diagramed below. 

Here is the code you will need to add to each master page.  Make sure that the URL’s point to where you have the files housed.  They do need to be absolute URL’s, as you will be adding this code across site collections, web apps and even servers.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://yoursite/SiteCollection/LibraryName/jquery.SPServices-latest.min.js"></script>
<script type="text/javascript" src="http://yoursite/SiteCollection/LibraryName/topnavigation.js"></script>

For example if I put “jquery-latest.js”, “jquery.SPServices-latest.min.js”, and “topnavigation.js” in my Resoures site collection in the document library called ScriptsLibrary, then it would look like this:

<script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/jquery.SPServices-latest.min.js"></script>
<script type="text/javascript" src="http://www.bitsofsharepoint.com/Resources/ScriptsLibrary/topnavigation.js"></script>

5) SharePoint Links List for Tabs and Pull Downs
In version 2.0 we now can pull the tabs and pull downs from just two lists.  This makes it much easier to maintain and deploy.  Now we only need to go to the Tabs list to add another tab.  In the Tab Pull Down list we can associate a pull down to any of the tabs.  This will make it very easy to switch a pull down from one tab to another if needed. 

Tabs List

First lets create the Tabs list.  This list will be a custom list.  This list must be called “Tabs”.  Here are the columns to add.  The columns have to be the same as well for the solution to work.

• Title – This is the name of the Tab.
• Description: Name of the Tab.
• Pull Down – This is a yes/no field.  Selected will the pull down items.  Unselected will show no pull down or .  
• Description: Uncheck the box to indicate the Tab will have NO pull down.  This will eliminate the pull down image.
• Location – This is a choice field.  The choice is “Left” or “Right”.  This will tell the tab to either be on the left site of the top navigation or the right site.
• Description: Choose if the tab will be to the left or right of the default taps.
• Tab Link – This is a single line of text field.  This is where the URL for the tab would go.
• Description: Enter a url to give the tab a link, otherwise leave blank for no link.  Make sure link has http://
• Order Tabs – This is a choice field. Make a selection from A to K.  This will be how you order your tabs on the left or right.
• Description: RIGHT orders in ascending manner. A – Z LEFT orders in descending manner. Z – A

Next lets change the All Items view to sort and Group appropriately.  This view will dictate the the order the tabs show up.

On All Items view you will want to Modify View and make the following changes.

Sort – Change the following:

• Sort by “Order Tab” in “ascending order”.

Group By – Change the following:

• Group by to “Location” in “ascending order”.
• And set to “Expand”.

Tab Pull Down List

Next lets add the Tab Pull Down list.  This list will be a standard links list.  This list must be called “Tab Pull Down”.  Here are the columns to add in addition to the standard columns.  The columns have to be the same as well for the solution to work.

• Tab – This columns is a look up column looking up the “Tab” list with the Title column being looked up.
• Group – This column will be used to group the links together.  So all “Help” links will be together and all “Features” links will be together. 
• This is a text field or it can be a choice field if you know all the groups.  
• LinkType – This column will be used to identify what type of link it is.
• This is a Choice column. 
• We have three choice types and each will cause the pull down to display the link in different way:
• Link – This will display the item as a link within the group.
• Header – This will display the item as a header without a link.
• Header Link – This will display the item as a header with a link.
• (Header and Header Link look them same, but act differently)

Next you will want to change the default All Links view to the following:

• Sort – Change the following:
• All users to order items in this view, set to “No”.
• Sort by “LinkType” in “ascending order”.
• And Sort by “URL” in “ascending order”.
• Group By – Change the following:
• Group by to “Tab” in “ascending order”.
• Group by to “Group” in “ascending order”.
• Show grouping as “Expanded”.

This new view will be the way the items show in the pull down for the global navigation.  So you can play with the view here to sort and group it as you wish.

Here is an example of what it should look like once you have lists setup.  You will also notice that I have made a connection between Tabs and Tab Pull down so that I can essentially filter my view to show what the tab and associated pull down items are.

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

6) Solution Code
In version 2.0 I have made it so that you only have to change one thing and then you never have to touch this file again.  

In the code below or in the topnavigation.js file you will need to change the following:
    listSiteTabURL = ‘http://www.bitsofsharepoint.com/topnav/’;

You will find this code at the top.  Change http://www.bitsofsharepoint.com/topnav/ to the site that your Tab and Pull Down List are located. URL needs to be of the site location NOT of the list location.

• Incorrect Example: ‘http://www.intranet.com/SiteName/List/ListName/’
• Correct Example: ‘http://www.intranet.com/SiteName/’

Once you make that change you can save the file in your scripts library and you are done with that file.

Here is the code to add to the topnavigation.js file or you can download the topnavigation.js file from here: http://www.bitsofsharepoint.com/ExamplePoint/Download/topnavigation.js

$(document).ready(function(){
    listSiteTabURL = 'http://www.bitsofsharepoint.com/topnav/';
    $().SPServices({
        operation: "GetListItems",
        webURL: listSiteTabURL,
        listName: 'Tabs',
        async: false,
        completefunc: function (xData, Status) {
            $(xData.responseXML).find('[nodeName=z:row]').each(function() {
                var i = 1;
                var tabSide = $(this).attr("ows_Location");
                var titleTabName = $(this).attr("ows_Title");
                var urlTab = $(this).attr("ows_Tab_x0020_Link");
                var tabPullDown = $(this).attr("ows_Pull_x0020_Down");
                var listName = 'Tab Pull Down';
                var listSiteURL = listSiteTabURL;
                var titleTabID = 'zz1_TopNavigationMenun' + titleTabName.replace(/[-' ']/g,'');
                var showTabPD = titleTabID + 'Show';
                var showTabAppend = titleTabID + 'Append';
                if (urlTab != null) {
                    var urlTabShow = 'href=' + urlTab;
                } else {
                    var urlTabShow = '';
                }
                if (tabPullDown == true) {
                    var tabImage = '<img style="border-style:none; vertical-align:top;" alt="" src="/_layouts/images/menudark.gif">';
                    var pullDown = '<div style="position:absolute;height: 0px;z-index:1;"><div id="' + showTabPD + '" class="zz1_TopNavigationMenu_8" style="display:none;position:relative;top:0px; clip: rect(auto, auto, auto, auto);z-index:1;"><table cellspacing="0" cellpadding="0" border="0" style="top: 0px;" id="' + showTabAppend + '"></table></div></div>';
                } else {
                    var tabImage = '';
                    var pullDown = '';
                }
                var tableRow = '<td id="' + titleTabID + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverRoot(this)"><table  width="100%" cellspacing="0" cellpadding="0" border="0" class="ms-topnav zz1_TopNavigationMenu_4"><tbody><tr id="mouse"><td style="white-space: nowrap;"><a ' + urlTabShow + ' style="border-style: none; font-size: 1em;" class="zz1_TopNavigationMenu_1 ms-topnav zz1_TopNavigationMenu_3">'    + titleTabName + '</a><td valign="top" style="width:0pt;" >'+ tabImage +'</td></tr></tbody></table>'+ pullDown +'</td>';
                if (tabSide == 'Left') {
                    $('table#zz1_TopNavigationMenu').children().children().prepend(tableRow);
                } else {
                    $('table#zz1_TopNavigationMenu').children().children().append(tableRow);
                }
                $().SPServices({
                    operation: "GetListItems",
                    webURL: listSiteURL,
                    listName: listName,
                    async: false,
                    completefunc: function (xData, Status) {
                        $(xData.responseXML).find('[nodeName=z:row]').each(function() {
                            var URLdataTN1 = $(this).attr("ows_URL").split(',');
                            var linksTN1 = $(this).attr("ows_LinkType");
                            var TabTN1 = $(this).attr("ows_Tab").split('#');
                            var TabC = TabTN1[1];
                            var notesVar = $(this).attr("ows_Comments");
                            if (notesVar == null) {
                                var notes = '';
                            } else {
                                var notes = 'title="' + notesVar + '"';
                            }
                            if (titleTabName == TabC) {
                                if (linksTN1 == 'Header') {
                                    $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7 ms-topNavFlyOutsHover"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6 ms-topNavFlyOutsHover" '+ notes +'><strong>' + URLdataTN1[1] + '</strong></a></td></tr></tbody></table></td></tr>');
                                    i++;
                                } else if (linksTN1 == 'Header Link') {
                                    $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7 ms-topNavFlyOutsHover"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" href="' + URLdataTN1[0] + '" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6 ms-topNavFlyOutsHover" '+ notes +'><strong>' + URLdataTN1[1] + '</strong></a></td></tr></tbody></table></td></tr>');
                                    i++;
                                } else {
                                    $('#' + showTabAppend).append('<tr id="zz1_TopNavigationMenun' + i + '" onkeyup="Menu_Key(event)" onmouseout="Menu_Unhover(this)" onmouseover="Menu_HoverDynamic(this)"><td><table cellspacing="0" cellpadding="0" border="0" width="100%" class="ms-topNavFlyOuts zz1_TopNavigationMenu_7"><tbody><tr><td style="white-space: nowrap; width: 100%;"><a style="border-style: none; font-size: 1em;" href="' + URLdataTN1[0] + '" class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6" '+ notes +'>' + URLdataTN1[1] + '</a></td></tr></tbody></table></td></tr>');
                                    i++;
                                }
                            } else {
                            }
                        });
                    }
                });
                $('#' + titleTabID).mouseover(function(){
                    $('#' + showTabPD).show();
                });
                $('#' + titleTabID).mouseleave(function(){
                    $('#' + showTabPD).hide();
                });
            });
        }
    });
});

View example here: http://www.bitsofsharepoint.com/ExamplePoint/navigation2/default.aspx

I will also be coming out with a template version that will allow you to load this without having to create the lists and libraries needed and will have the Script library populated with the needed scripts.

Hope version 2.0 helps.

Guest Author: Peter Allen
BitsOfSharePoint

Peter Allen is President of BitsOfSharePoint Consulting LLC, based in Sacramento, CA. He has worked in the technology field for 15 years creating and deploying solutions in Healthcare, financial, construction, municipalities, telecom, and engineering firms.  He provides solutions that address site architecture, taxonomy, useability and findability.  He also speaks at SharePoint community events and blogs at his SharePoint site http://www.bitsofsharepoint.com.