SharePoint – A Global Navigation Solution Across Site Collections – Version 2.0 Primer and Deployment

Guest Author: Peter Allen
BitsOfSharePoint

This article is going to recount my experience of adding my global navigation to my current site and highlight my next version of the global navigation solution that is a template and should make it much easier to implement, deploy and use.  If you have not read my first article SharePoint – A Global Navigation Solution Across Site Collections, please read that first.

This article will be broken up into two sections:

• What were the results and process like to deploy this solution across sites.
• What new features have been added in version 2.0

Implementation Process and Results

Let’s first take a look at the results.  My site is a WSS 3.0 version so top navigation pull downs are not an out of the box feature, just tabs are standard.  You will also notice that we indicate which tab has a pull down by the standard triangle icon .  The items are highlighted all based on SharePoint standard CSS so that when you change themes the tabs and pull downs follow.  I also added the feature that allows you to have a description pop up when you hover over a link.  All of these features are standard in MOSS.

Here is what the before and after view looks like.

AFTER

Now deploying this solution involved using SharePoint designer to edit the Master pages of each site I wanted the navigation to be added to.  I then would add three lines of code.  Here is one lesson that I found quickly that affect the ease of implementation.  jQuery is a wonderful service that when implemented correctly works wonders, but when implemented incorrectly causes problems.  Nothing that can’t be fixed, but just involves extra steps.  Now I am guilty of causing these problems and it was interesting to see when I had implemented jQuery correcting, implementation of the global navigation was very easy, but when I implemented jQuery incorrectly it caused me to have extra steps.

What is a incorrect implementation of jQuery you may ask, well it is when you hard code a request for jQuery in a CEWP solution that causes problems.  Remember I am editing the Master Page and adding jQuery at this level.  All pages using this Master Page will load with jQuery and then all CEWP that use and have jQuery hard coded will have conflicts.  So what does that look like?  Here is hard coding the jQuery in a CEWP that will cause problems:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Why does this cause problems?  Well when you have multiple instances of this code on the same page you will get in a conflict especially if they are different versions being called.

Now the correct way for any CEWP solution should be the way the Paul Grenier provides in his solutions.  It first checks to see if jQuery has been loaded and if it has it will not load another version.   Here is an example of his code.

<script type="text/javascript">
if(typeof jQuery=="undefined"){
    var jQPath="http://code.jquery.com/";
    document.write("<script src='",jQPath,"jquery-latest.js' type='text/javascript'><\/script>");
}
</script>

So how did I fix the sites that had this problem where the CEWP solutions had hard coded jQuery references.  Well I had to go into each CEWP that had it the wrong way and delete the reference to jQuery.  This was fine to do as I was loading jQuery in the Master Page so it will be available to the CEWP that was calling for it.

I will be going through my solutions that use jQuery to make sure that I am using Paul Grenier’s method so that my solutions do not cause this problem in the future. 

Deploying this solution once implemented involved editing Master Pages on site collections where the global navigation was to be used.  In cases where the global navigation was deployed, but did not show up was a simple fix of editing the CEWP that had a reference to jQuery.

In my next article I will go into depth about implementing my global navigation newest version 2.0.

Version 2.0 Global Navigation Features

In implementing and deploying this on my site I have had time to reflect on what features were missing from MOSS and my current 1.0 version and looked at how to add these to mirror a similar experience.  As a result version 2.0 will have the following features 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 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 popups when you hover over a link.


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

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.  You will only need to change the code in one place on the topnavigation.j file and add the three lines of code to the Master Page.  Below is an image of the template:

Next article on this matter should have the new version and the template.

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.