Customizing SharePoint 2010 global navigation with Css and jQuery – Part III

This is the third post in the series of three articles about how to customize the global navigations with Css and jQuery. This post will cover up following topics:

• Back to roots: The few base classes for the global navigation
• How to extend the global navigation with a drop down menu
• How to extend the drop down with jQuery
• How to use two global navigations with different sitemap providers

Catch up the previous posts here:

• Part I
• Part II

Back to basics

In previous articles we looked at how to customize the global navigation in various ways, but now I´d like to lead you back to the basic CSS classes that runs the navigation. No need to get it to complicated, the global navigation can be customized in so many ways regarding the functions as well as look & feel, and there´s not so many classes involved here after all.

At the core there´s only four classes for the navigation list, the menu items, hover and selected. This following CSS contains a most simplified customization of the global navigation, it will change the background color, hover color, selected color and make it a bit higher and more prominent.

/* Navigation list */
.s4-tn{
background-color:#00557B;
padding:0px; margin:0px;
}
/* Global navigation */
.s4-tn li.static > .menu-item{
color:#fff; white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
line-height:25px;
height:28px;
}
/* Hover */
.s4-tn li.static > a:hover{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#000; text-decoration:none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff; text-decoration:none;
border:1px transparent solid;
padding-right:10px;
padding-left:10px;
margin:0px;
}

Because of this navigation is higher than the OOTB navigation I wanted to specify the vertical align for the search box. The following CSS will also set outlines to none.

/* Position for search */
.s4-search{
padding-top:7px !important;
}
/* Remove dotted outlines */
a:hover, a:active, a:focus  { outline:none }

Use and activate drop down menu

First of all you need to use the browser and go to the root site from where you want to display the drop down. Click site settings and navigation and check sub sites. Updated: This will only work for SPS, you have to repalce the SiteMap if its about foundation. See my comment down below.
Secondly you have to modify the menu control in the master page with help of SharePoint Designer. Change the property for MaximumDynamicDisplayLevels from 1 to 2 to get a drop down of two levels.

Css for the drop down menu

There’s basically only one class called dynamic that ULs and LIs use for the dropdown, so if we need to modify the dropdown and specify things like padding, borders or backgrounds it´s quite simple. In this example I use cross browser CSS gradients with a fallback background color for non CSS 3 browsers. When hover items in the dropdown they will be white with a blue text color otherwise they will be gradient in a grey scale.

/* No arrows applies two levels */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
background-image:none;
}
.s4-tn ul.dynamic {
/* UL wrap */
background-image:none;
border-top:0px #ccc solid;  border-right:1px transparent solid ;
border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
margin:0px; padding:0px;
}
/* LIs */
.s4-tn li.dynamic  {
background-image:none;
border-top:1px #ccc solid; border-right:1px #ccc solid;
border-bottom:1px #fff solid; border-left:1px #fff solid;
}
/* LI menu items */
.s4-tn li.dynamic > .menu-item {
padding:7px 10px;
height:16px;
color:#333;
background-color:#f7f7f7; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";
}
/* LI menu items hover */
.s4-tn li.dynamic > a:hover {
color:#00557B;
background-color:#fff; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, #ffffff, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}

Pimp the drop down menu with jQuery

If you want to let the menu to act slightly smoother when it drop downs then jQuery can be an alternative.

SharePoint global dropdown menu

►

One way could be to use .Animate() that is a part of jQuery API. However in this case I would like to take the advantages of one the many jQuery plugins called Superfish. This plugin is built for unordered lists and works well for the major browsers and it fits nicely into SharePoint 2010.

Go to Superfish site and download the plugin and upload it to your SharePoint environment. Reference to latest jQuery and to Superfish in the master page:

<script src="/Style Library/Jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/Style Library/MyBlog/superfish.js" type="text/javascript"></script>

Paste following jQuery in the head section of the master page:

<script type="text/javascript">
$(document).ready(function() { 
  $('.menu-horizontal ul ul ul').superfish({ 
     delay:       1000,                            
     animation:   {opacity:'show',height:'show'},   
     speed:       'nomal',                         
     autoArrows:  false,                           
     dropShadows: false                            
  }); 
}); 

Use following CSS if you use Superfish:

/* ---- classes for drop down ------- */
/* No arrows applies two levels */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
background-image:none;
}
.s4-tn ul.dynamic {
/* UL wrap */
background-image:none;
border-top:0px #ccc solid;  border-right:1px transparent solid ; 
border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
margin:0px; padding:0px; 
}
/* LIs */
.s4-tn li.dynamic  {
background-image:none;
border-top:1px #ccc solid; border-right:1px #ccc solid;
border-bottom:1px #fff solid; border-left:1px #fff solid;
}
/* LI menu items */
.s4-tn li.dynamic > .menu-item {
padding:7px 10px;
height:16px;
color:#333;
background-color:#f7f7f7; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";
}
/* LI menu items hover */
.s4-tn li.dynamic > a:hover {
color:#00557B;
background-color:#fff; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, #ffffff, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}
/* -- Specials -- */
/* I want the second level DD to be close to the first DD */
.s4-tn ul ul ul ul{
margin-left:-2px!important;
}
/* Superfish inside display IE fix */
.menu-horizontal li:hover ul, .menu-horizontal li li:hover ul, 
.menu-horizontal li li li:hover ul, .menu-horizontal li li li li:hover ul{
display/*\**/:table-cell\9
}

Two global navigations with different sitemap providers

If you need to have double navigations, for example one for the SharePoint sites and an underlying for another kind of sites or pages you can simply use one more navigation control that reads from a common sitemap file. Let´s try this out!

1. Open the Web.config file for the SharePoint web application with a text editor such as notepad. Be sure to take a copy of this file before editing. Edit this file in a development environment before apply the same for the production environment. No need to perform an IIS reset. Each Web application has one single web config file; you will find it in following directory: C:\inetpub\wwwroot\wss\VirtualDirectories\80\Port_Number. Add the following it the siteMap and providers as a last row.

<add name="CustomNavigationProvider" siteMapFile="/_layouts/1033/styles/CustomNavigationProvider/CustomSiteMap.sitemap" type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

Edit the Web.config with notepad is an alternative to modify this file but in a real life scenario you should consider modifying the Web.config by a feature. Read more about this in MSDN

2. Create a SiteMap file named CustomSiteMap.sitemap and put it into a new folder with the name CustomNavigationProvider. Add this folder into following directory: \14\TEMPLATE\LAYOUTS\1033\STYLES\CustomNavigationProvider

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  
  <siteMapNode title="" url="">
    <siteMapNode title="About" url="/enterwiki/Pages/Home.aspx"/>
    <siteMapNode title="Business" url="/enterwiki/Pages/Home2.aspx">
	    <siteMapNode title="Business 1" url="/enterwiki/Pages/Home3.aspx"/>
	    <siteMapNode title="Business 2" url="/enterwiki/Pages/Home4.aspx"/>
   </siteMapNode>
    
  <siteMapNode title="Divisions">
	  <siteMapNode title="Division 1" url="/enterwiki/Pages/Home5.aspx">
		  <siteMapNode title="Division 1a" url="/enterwiki/Pages/Home6.aspx"/>
		  <siteMapNode title="Division 2a" url="/enterwiki/Pages/Home7.aspx"/>
		  <siteMapNode title="Division 3a" url="/enterwiki/Pages/Home8.aspx"/>
   </siteMapNode>
	<siteMapNode title="Division 2" url="/enterwiki/Pages/Home9.aspx"/>
  </siteMapNode>
    
  <siteMapNode title="Resources" url="/enterwiki/Pages/Home10.aspx"/>
  </siteMapNode>
  
</siteMap>

3. Open the master page and search for the content placeholder with the id PlaceHolderHorizontalNav. Replace this placeholder with this code:

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<!-- Original SharePoint ASP menu -->
	<div>
		<SharePoint:AspMenu
	  ID="TopNavigationMenuV4"
	  Runat="server"
	  EnableViewState="false"
	  DataSourceID="topSiteMap"
	  AccessKey="<%$Resources:wss,navigation_accesskey%>"
	  UseSimpleRendering="true"
	  UseSeparateCss="false"
	  Orientation="Horizontal"
	  StaticDisplayLevels="2"
	  	  MaximumDynamicDisplayLevels="0"
	  SkipLinkText=""
	  CssClass="s4-tn" />

<!-- Original sitemap DS -->
	<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
		<Template_Controls>
			<asp:SiteMapDataSource
			  ShowStartingNode="False"
			  SiteMapProvider="SPNavigationProvider"
			  id="topSiteMap"
			  runat="server"
			  StartingNodeUrl="sid:1002"/>
		</Template_Controls>
	</SharePoint:DelegateControl>
	</div>

<!-- Second SharePoint ASP menu -->
<div class="SecondNavigation">
	<SharePoint:AspMenu
	  ID="CustomXmlNavigationAspMenu"
	  Runat="server"
	  EnableViewState="false"
	  DataSourceID="CustomNavigationSiteMapDataSource"
	  AccessKey="<%$Resources:wss,navigation_accesskey%>"
	  UseSimpleRendering="true"
	  UseSeparateCss="false"
	  Orientation="Horizontal"
	  StaticDisplayLevels="1"
	  MaximumDynamicDisplayLevels="3"
	  SkipLinkText=""
	  CssClass="s4-tn-second">
	
	</SharePoint:AspMenu>

	<!-- Second sitemap DS -->
	<SharePoint:DelegateControl runat="server" ControlId="CustomXmlMapProviderDelegateControl">
		<Template_Controls>		
			<asp:SiteMapDataSource
			  ShowStartingNode="False"
			  SiteMapProvider="CustomNavigationProvider"
			  id="CustomNavigationSiteMapDataSource"
			  runat="server" />
		</Template_Controls>
	</SharePoint:DelegateControl>
	</div>
</asp:ContentPlaceHolder>

Thank you for following this series about branding the global navigation, if you got any questions just post a comment.