The global navigation in SharePoint is an important factor for the SharePoint site, this navigation are there to help orient users so they easily can move around the site. So when it comes to branding and customizing a SharePoint site it´s one of the key factors. When you branding the global navigation don´t forget to think simple but attractive, users may use the site navigation more than they use the search to find information.

In SharePoint 2010 the global navigation renders with unordered lists and list items (UL and LI), which gives us a simpler and more standard way for customization, especially compared to previous versions of SharePoint when the navigation rendered in a nestled table markup. There are a couple of ways and tools when it comes to build a custom navigation in SharePoint. The central point for the navigation is the functionality and the look and feel that means that we have to deal with CSS 2.1 or 3.0 and the SharePoint ASP menu control and its data source.


An example of a customized SharePoint OTB menu with use of CSS and jQuery. Check the nextcomming post (Part II) of how to extend the navigation with jQuery.

The options we have depend of the needs, but also the approach you choose depends if we talking about a public faced web site or an Intranet.

  • Use the OTB control with changed settings
  • Extend the OTB menu control with custom Css 2.1 or 3.0
  • Extend the OTB menu control and hook it up with custom jQuery
  • Extend the OTB menu control with a custom site map provider
  • Code a new navigation control, and use a technique like Silverlight
  • Use a complete stand-alone navigation with jQuery that isn’t connected to SharePoint

There is a lot to think about when it comes to customization of the SharePoint global navigation so therefore I´ll split this article in the minimum of three articles. So here´s the plan:

  1. Introduction and How to customize the global navigation with CSS 2.1 and 3.0 (this post)
  2. How to customize the global navigation with custom CSS and how to use jQuery to work with feeling of the navigation, like animating a menu. Go there
  3. Tips and tricks about navigation settings, how to use different site map providers & multiple navigation providers, branding dropdown menus and more.


Below is a bunch of examples for customized navigation menus I have created specific for the article series. Of course, no guaranties for real cross browser CSS; these examples are mostly verified in IE 8 and Firefox 3.6.12, GC and Safari.




Open up your SharePoint top site with your favorite tool SharePoint Designer 2010 and create a CSS file and put in a reference to this in a your (custom) master page. Put in the following line just below SharePoint:CSSlink tag in the master page.

<SharePoint:CssRegistration name="/Style Library/Blog/Blue.css" runat="server" After="corev4.css"/>

First off, a clean blue navigation with a smooth gradient background color. It has four properties for the background selectors and that´s because this is for various browsers. There are also a couple of extra classes below ‘Other stuff’ that you don´t need specific for the navigation. You can take those away if you prefer.

/*---| By @Cstahl 2010 |---*/
.s4-lp, body #s4-topheader2{
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
margin-left:0px;
border-top:0px;
border-bottom:0px;
margin-left:0px;
}
.menu-horizontal{
margin-left:10px;
border-right: 1px #167FB3 solid;
background-image:none;
}
.menu-horizontal ul li{
color:#fff!important;
min-height:31px;
line-height:30px;
border:0px;
padding:0px;
margin:0px;
border-left:1px #167FB3 solid;
}
.menu-horizontal ul li a{
color:#fff!important;
font-weight:bold;
border:0px!important;
padding:0px!important;
margin:0px;
height:31px!important;
background-color:#2d9cc7; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#2d9cc7), to(#157db2));
background: -moz-linear-gradient(top, #2d9cc7, #157db2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#2d9cc7, endColorstr=#157db2)";
padding-right:20px!important;
padding-left:20px!important;
}
.s4-toplinks .s4-tn > .menu-horizontal ul li a:hover {
text-decoration:none!important;
/*if use 333 the DD color will not work*/
color:#333!important;
background-color:#036ba8; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#036ba8), to(#4fb3d3));
background: -moz-linear-gradient(top, #036ba8, #4fb3d3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#4fb3d3)";
height:31px!important;
border:0px;
padding:0px;
margin:0px;
}
.s4-toplinks .s4-tn > .menu-horizontal a.selected {
color: #fff!important;
background-color:#4fb3d3; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#4fb3d3), to(#036ba8));
background: -moz-linear-gradient(top, #4fb3d3, #036ba8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036ba8);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4fb3d3, endColorstr=#036caa)";
line-height:30px;
height:31px;
border:0px;
padding:0px;
margin:0px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none!important;
}
.s4-tn ul.dynamic {
background-image:none!important;
border:1px solid #f7f7f7;
border-top:0px;
border-bottom:1px solid #ccc;
margin:0px;
padding:0px;
}
.s4-tn li.dynamic {
background-image:none!important;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:0px solid #ccc;
border-left:1px solid #ccc;
}
.s4-tn li.dynamic > .menu-item {
display:block;
padding-left:19px!important;
white-space:nowrap;
font-weight:normal;
background-color:#ffffff!important;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7))!important;
background: -moz-linear-gradient(top, #ffffff, #f7f7f7)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)"!important;
color:#333!important;
}
.s4-tn li.dynamic > a:hover {
background-color:#ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff))!important;
background: -moz-linear-gradient(top, #ffffff, #ffffff)!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)!important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)"!important;
color: green!important;
}
/*----- Some other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
 margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:0px;
background-color:#f7f7f7!important
}
.s4-title{
min-height:70px;
padding:0px;
}
.s4-titlelogo{
padding-left:10px
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:3px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background-color:#a0d9e6; /*Fallback*/
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#f7f7f7));
background: -moz-linear-gradient(top, #a0d9e6, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#f7f7f7)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:70px;
}


Next: A tabbed navigation with use of three images. In the next post I will show you have to interact with the tabs to make them jump on hover.
Want to try the tabbed navigation? You can download the images here.


/*---| By @Cstahl 2010 |---*/
.menu-horizontal{
margin-left:5px;
}
.menu-horizontal A.dynamic-children SPAN.additional-background {
background-image:none;
}
.menu-horizontal ul li{
text-align:center;
font-size:11px;
line-height:18px;
padding:0;
margin:0;
}
.menu-horizontal ul li a{
width:105px;
background-image:url('/Style Library/Blog/Images/tab.png');
background-position: 0 0;
background-repeat:no-repeat;
padding:0;
cursor:pointer;
color:#0a7285;
text-decoration:none;
}
.menu-horizontal ul li.active{
width:105px;
height:18px;
margin:0;
}
.menu-horizontal ul li.active a{
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
color:#0a7285;
width:105px;
height:18px;
padding-top:8px;
}
.menu-horizontal ul li a:hover{
background-image:url('/Style%20Library/Blog/Images/TabActiveHover.gif');
background-position: 0 0;
background-repeat:no-repeat;
width:105px;
}
.s4-toplinks .s4-tn a.selected{
border-style: none;
border-color: inherit;
border-width: 0px;
background-image:url('/Style%20Library/Blog/Images/TabActive.gif');
background-position: 0 0;
background-repeat:no-repeat;
background-color: transparent;
width:118px;
height:16px;
color:#333;
margin-top:1px;
margin-right:1px;
margin-bottom:0px;
margin-left:1px;
}
.s4-tn ul.dynamic{
background-color:#f7f7f7!important;
border:1px solid #ccc;
border-top:0px;
margin-left:2px;
}
.s4-tn li.dynamic > .menu-item{
display:block;
padding:5px 10px;
white-space:nowrap;
font-weight:normal;
background-image:none;
text-align:left
}
.s4-tn li.dynamic > a:hover{
font-weight:normal;
background-color:#9FD8E6;
background-image:none;
}
/*----- Other stuff -------*/
.col-fluid-1, .right-wp-zone-col {
margin-top:20px
}
#s4-leftpanel-content {
padding-top:20px!important;
border-right:0px!important;
border-bottom:0px!important;
margin-right:0px;
margin-left:6px;
background-color:#f7f7f7!important
}
.s4-titlelogo{
padding-left:10px
}
.s4-title{
padding-left:0px;
}
TD.ms-sbscopes {
padding-right:0px
}
.s4-search, .s4-rp{
padding-top:2px!important;
margin-right:0px;
}
.s4-search TABLE {
margin-right:0px
}
.s4-title-inner{
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#7ec1d0));
background: -moz-linear-gradient(top, #f7f7f7, #7ec1d0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0)";
padding:0px 0px 0px 0px;
margin:0px;
min-height:100px;
}
.s4-lp, body #s4-topheader2{
background-color:#7ec1d0;
margin-left:0px;
border-top:0px;
border-bottom:0px;
}

Go to the next article: Customizing SharePoint 2010 global navigation with Css and jQuery – Part II

Stay in tune and I hope you enjoyed this and please drop a comment if you have questions.

< / Christian >