Customizing SharePoint 2010 global navigation with Css

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


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.

1

"/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. .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; } 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('/_layouts/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('/_layouts/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('/_layouts/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('/_layouts/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; }