Skip to main content

Navigation v 2.0

Go Search
Home
  

B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Navigation v 2.0

 ‭(Hidden)‬ EasyTabs

 Overview

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:

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 menudark[1] 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.

image

 

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 menudark[1] 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 menudark[1] will show indicating there is more to view.
    • image
  • By adding comments in the notes section of the links, they will then become pop-ups when you hover over a link.
    • image
  • 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.

image

 

Now lets 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. 

image

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 menudark[1].  
    • 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.

    image

     

    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.

    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();
                    });
                });
            }
        });

    });

     

    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.

  •  Tabs

    SelectEdit
    NormalA 
    T o p i c P o i n tUse SHIFT+ENTER to open the menu (new window).
    Right/Site/Home.aspxYes
    NormalB 
    B l o g P o i n tUse SHIFT+ENTER to open the menu (new window).
    Right/BlogPoint/default.aspxNo
    NormalC 
    E x a m p l e P o i n tUse SHIFT+ENTER to open the menu (new window).
    Right/ExamplePoint/default.aspxYes
    NormalD 
    C o n s u l t i n g P o i n tUse SHIFT+ENTER to open the menu (new window).
    Right/ConsultingPoint/default.aspxNo

     Tab Pull Down

    EditCommentsFilter
    Expand/Collapse TabE x a m p l e P o i n t ‎(19)
    Expand/Collapse Group‎(19)
     
    Calendar - With mouseover Preview Pane
    This example shows how using JQuery code from Paul Grenier, http://www.endusersharepoint.com/?p=1223, you can create a preview pain to see all the details without having to click on the calendar item
    LinkE x a m p l e P o i n t
     
    CEWP Solution Interface
    This solution is for coders creating CEWP solutions.  This provides an easy interface for end users to input variables.
    LinkE x a m p l e P o i n t
     
    Documents Grouped by
    This example shows how using columns/metadata provides a more meaning fully way to viewing documents.
    LinkE x a m p l e P o i n t
     
    Images - SharePoint /_layout/images/ Full List
    Here is a list of all the images found in SharePoint /_layout/images/ directory.
    LinkE x a m p l e P o i n t
     
    List - Collapse/Expand Text Field
    Here is a great JQuery solution that will take any text field and collapse it so that it will not take up the whole view.  Then click to expand and read the text.  Wonderful!
    LinkE x a m p l e P o i n t
     
    List - View a List on any other site
    Here is a great way with JQuery to view a list on any other site.  OOB this cannot be done with SharePoint, but now you can with this script.
    LinkE x a m p l e P o i n t
     
    List and Document Library Filter
    Here is a simple solution to add filtering for any list or document library.  Filter what is showing to find just the info you need.
    LinkE x a m p l e P o i n t
     
    List and Document Library Search
    This solution provides a way to search a list by metadata and show any items that contain the search parameters.
    LinkE x a m p l e P o i n t
     
    Meeting Minutes - Blog
    Here is a different way to keep meeting minutes by using a Blog.  Click for instructions on how to setup a Meeting Minutes Blog.
    LinkE x a m p l e P o i n t
     
    Meeting Minutes - Blog - Advance
    Here is a different way to keep meeting minutes by using a Blog.  Click for instructions on how to setup a Meeting Minutes Blog.
    This example provide solutions that use JQuery and Designer.
    LinkE x a m p l e P o i n t
     
    Navigation - Global Navigation Across Site Collections
    Here is a global navigation solution across site collections.
    LinkE x a m p l e P o i n t
     
    Pop-up for Lists - Basic
    This is a great JQuery solution that adds a pop-up for any list when you mouse over the title of the item.
    LinkE x a m p l e P o i n t
     
    Pop-up List/Document Library/Calendar - Customize - Advance
    Here I outline how you can customize Paul Grenier's LoadTip script.
    LinkE x a m p l e P o i n t
     
    Print Clean Pages and Lists
    Here are tricks to prinitng a clean page or to be able to print a list from a page.
    LinkE x a m p l e P o i n t
     
    Site Owner
    Create a central place to manage who the site owners are and be able to diplay them on each site.
    LinkE x a m p l e P o i n t
     
    Status/Progress Bar
    This example shows how a progress bar can be created from several fields in a list using javascript and calculated column,
    LinkE x a m p l e P o i n t
     
    Tab Page
    Add a page with tab functionality that has a web part associated to each one.
    LinkE x a m p l e P o i n t
     
    Tool Tip for Quick Launch and other Link Lists
    This example shows how you can add a tool tip to the Quick Launch links or to any links.
    LinkE x a m p l e P o i n t
     
    Wiki Customization
    Here is a way to customize your Wiki to have a look and feel on each Wiki page.
    LinkE x a m p l e P o i n t
    Expand/Collapse TabT o p i c P o i n t ‎(9)
    Expand/Collapse Group‎(9)
     
    Calculated-Columns-Formula
    This area provides an overview of the formulas that can be used with the Calculated Columns.  There are many Excel formulas that you can perform on a row in any list.  Click to learn more.
    LinkT o p i c P o i n t
     
    Calculated-Columns-HTML
    This area provides an overview of the abailty to use the calculated colmn to show HTML in a field.  This will really open up possiblities.  For example progress bars can now easily be incorporated. Click to learn more.
    LinkT o p i c P o i n t
     
    Document-Library
    This areas provides an overview of how to best use a document library and how to manage, group and sort documents in a document library. Go Folderless and feel the freedom.  Click to learn more.
    LinkT o p i c P o i n t
     
    Javascript-JQuery
    This area will provide an overview of the great solutions being created with JQuery and Javascript.  You will be amazed at what you can do with out having to request an IT person to help you out.  Click to learn more.
    LinkT o p i c P o i n t
     
    Lists
    This area provides information on the many things that you can do with lists.  Lists are such a central part of SharePoint. List away!
    LinkT o p i c P o i n t
     
    Meeting-Minutes
    This area will provide an overview of how you can use a Blog to transform how meeting minutes are used, viewed and orginized.  Click to learn more.
    LinkT o p i c P o i n t
     
    Navigation
    This area will provide an overview of how you can tweak the standard navigation that comes with SharePoint. Click to learn more.
    LinkT o p i c P o i n t
     
    SharePoint-Add-ons
    This area will provide an overview of some of the add-ons that I have found.  MOST of these will be free items with only a few that are for pay.  Click to learn more.
    LinkT o p i c P o i n t
     
    Wiki
    This area will provide an overview of Wiki's and what you can do with them. Click to learn more.
    LinkT o p i c P o i n t
     
     
    Global Navigation Solution across Site Collections - Version 2.0