Customize SharePoint Top Navigation Bar

Posted on December 12, 2011 by sharepointsriram

Customize SharePoint Top Navigation Bar

http://www.n8d.at/blog/sharepoint-2010/round-corners-in-top-navigation-of-sharepoint-2010/

Round corner in top navigation

The navigation in SharePoint 2010 has slightly changed and will now be rendered a new way as a list. To use list elements instead of tables is a common practice in web development. The structure of the navigation and therefore the top navigation has some important elements and style sheet classes that allow you to theme the top navigation really easy.

The Basic

The top navigation is a list as mentioned before. Inside a list element is a hyperlink that contains a span element. The source for one element on the top navigation looks like this:

1 <li class="static">
2     <a class="static menu-item" href="/Blank">
3         <span class="additional-background">
4             <span class="menu-item-text">Blank</span>
5         </span>
6     </a>
7 </li>

To get a rounded navigation the background will be attached in this example to the hyperlink and the additional-background class. To reset the navigation add the follow style to your stylesheet.

1 .s4-tn ul li.static,
2 .s4-tn ul li.static.selected,
3 .s4-tn ul li.static a.static,
4 .s4-tn ul li.static a.static.selected{
5     padding: 0px;
6     margin: 0px;
7     background-color: transparent;
8     border: 0px;
9     background-image: none;
10 }

This style removes all paddings, margins and anything else that is not needed.

The Background Image

For the background images is use CSS sprite. If you don’t know what this is you can find a really good article on “A list apart”. Basically I us only a single background image and move the background around using background-position property. So the background image is use looks like this:

The red area I will use as a navigation background. The yellow will be my hover effects and also mark the selected navigation element but I will tell you later more.

The navigation

In the previous step I removed all margins and padding, which is good because now all navigation elements have now all the same values and set to zero. To attach the background I first stretch the navigation elements back to the values I will use later for the navigation.

1 .s4-tn ul li.static a.static,
2 .s4-tn ul li.static a.static.selected{
3     background-color: orange;
4     padding-left: 10px;
5     padding-bottom: 9px;
6     margin-right: 5px;
7     color: white;
8 }
9 .s4-tn ul li.static a.static .additional-background{
10     background-color: maroon;
11     padding-right: 10px;
12     padding-top: 5px;
13     padding-bottom: 6px;
14     color: white;
15 }

These styles above will let the top navigation look like this:

The final Step

Now to get the background image on our navigation you just need to add the background-image property to our style sheet. To get the parts of sprite in the right position we need to add the background-position too. The style sheet look then like this:

1 .s4-tn ul li.static a.static,
2 .s4-tn ul li.static a.static.selected{
3     background-image: url('/_layouts/navigationtest/navigation-bg.png');
4     background-repeat: no-repeat;
5     background-position: left -120px;
6     padding-left: 10px;
7     padding-bottom: 9px;
8     margin-right: 5px;
9     color: white;
10 }
11 .s4-tn ul li.static a.static .additional-background{
12     background-image: url('/_layouts/navigationtest/navigation-bg.png');
13     background-repeat: no-repeat;
14     background-position: right 0px;
15     padding-right: 10px;
16     padding-top: 5px;
17     padding-bottom: 6px;
18     color: white;
19 }

And now you have navigation with round corners then looks like this:

So this wasn’t rocket science so far and only a view line of style sheet mission can be accomplished. One thing left missing, so what about the hover? Even no problem but we need to move the background images. The style for that looks like this and hover is done.

1 .s4-tn ul li.static a.static:hover,
2 .s4-tn ul li.static.selected a.static.selected,
3 .s4-tn ul li.static.selected a.static.selected:hover{
4     background-position: left -180px;
5     color: black;
6 }
7 .s4-tn ul li.static a.static .additional-background:hover,
8 .s4-tn ul li.static.selected a.static.selected .additional-background{
9     background-position: right -60px;
10     color: black;
11 }

And so it should look then:

The style above also alters the style of the selected tab and the whole style adaption has only thirty two lines of pure css without any jquery or other code required.

Conclusion:

So in general Microsoft done a great job to get rid of the lame table based design to a completely more web designstandard way. Styling the navigation is one good example how easy some things have become in SharePoint 2010. The classes on the element are better structured and well attached to the elements. Simple hover effects even don’t need any scripting code at all.

http://chrisstahl.wordpress.com/2011/01/26/customizing-sharepoint-2010-global-navigation-with-css-and-jquery-%E2%80%93-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:

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.

01 /* Navigation list */
02 .s4-tn{
03 background-color:#00557B;
04 padding:0px; margin:0px;
05 }
06 /* Global navigation */
07 .s4-tn li.static > .menu-item{
08 color:#fff; white-space:nowrap;
09 border:1px solid transparent;
10 padding:4px 10px;
11 line-height:25px;
12 height:28px;
13 }
14 /* Hover */
15 .s4-tn li.static > a:hover{
16 background:url("/_layouts/Images/selbg.png") repeat-x left top;
17 background-color:#0087C1;
18 color:#000; text-decoration:none;
19 }
20 /* Selected */
21 .s4-toplinks .s4-tn a.selected{
22 background:url("/_layouts/Images/selbg.png") repeat-x left top;
23 background-color:#0087C1;
24 color:#fff; text-decoration:none;
25 border:1px transparent solid;
26 padding-right:10px;
27 padding-left:10px;
28 margin:0px;
29 }

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.

1 /* Position for search */
2 .s4-search{
3 padding-top:7px !important;
4 }
5 /* Remove dotted outlines */
6 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.

01 /* No arrows applies two levels */
02 .menu-horizontal a.dynamic-children span.additional-background,
03 .menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
04 background-image:none;
05 }
06 .s4-tn ul.dynamic {
07 /* UL wrap */
08 background-image:none;
09 border-top:0px #ccc solid;  border-right:1px transparent solid ;
10 border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
11 margin:0px; padding:0px;
12 }
13 /* LIs */
14 .s4-tn li.dynamic  {
15 background-image:none;
16 border-top:1px #ccc solid; border-right:1px #ccc solid;
17 border-bottom:1px #fff solid; border-left:1px #fff solid;
18 }
19 /* LI menu items */
20 .s4-tn li.dynamic > .menu-item {
21 padding:7px 10px;
22 height:16px;
23 color:#333;
24 background-color:#f7f7f7; /* fallback */
25 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
26 background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
27 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);
28 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";
29 }
30 /* LI menu items hover */
31 .s4-tn li.dynamic > a:hover {
32 color:#00557B;
33 background-color:#fff; /* fallback */
34 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
35 background: -moz-linear-gradient(top, #ffffff, #ffffff);
36 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
37 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
38 }

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

SharePoint global dropdown menu

▶

//

<p>JavaScript required to play <a hreflang=”en” type=”video/mp4″ href=”http://videos.videopress.com/NwBSPZBP/dropdownmenu_std.mp4″>SharePoint global dropdown menu</a>.</p>

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:

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

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

01 <script type="text/javascript">
02 $(document).ready(function() {
03   $('.menu-horizontal ul ul ul').superfish({
04      delay:       1000,                           
05      animation:   {opacity:'show',height:'show'},  
06      speed:       'nomal',                        
07      autoArrows:  false,                          
08      dropShadows: false                           
09   });
10 });

Use following CSS if you use Superfish:

01 /* ---- classes for drop down ------- */
02 /* No arrows applies two levels */
03 .menu-horizontal a.dynamic-children span.additional-background,
04 .menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
05 background-image:none;
06 }
07 .s4-tn ul.dynamic {
08 /* UL wrap */
09 background-image:none;
10 border-top:0px #ccc solid;  border-right:1px transparent solid ;
11 border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
12 margin:0px; padding:0px;
13 }
14 /* LIs */
15 .s4-tn li.dynamic  {
16 background-image:none;
17 border-top:1px #ccc solid; border-right:1px #ccc solid;
18 border-bottom:1px #fff solid; border-left:1px #fff solid;
19 }
20 /* LI menu items */
21 .s4-tn li.dynamic > .menu-item {
22 padding:7px 10px;
23 height:16px;
24 color:#333;
25 background-color:#f7f7f7; /* fallback */
26 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
27 background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
28 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);
29 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";
30 }
31 /* LI menu items hover */
32 .s4-tn li.dynamic > a:hover {
33 color:#00557B;
34 background-color:#fff; /* fallback */
35 background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
36 background: -moz-linear-gradient(top, #ffffff, #ffffff);
37 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
38 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
39 }
40 /* -- Specials -- */
41 /* I want the second level DD to be close to the first DD */
42 .s4-tn ul ul ul ul{
43 margin-left:-2px!important;
44 }
45 /* Superfish inside display IE fix */
46 .menu-horizontal li:hover ul, .menu-horizontal li li:hover ul,
47 .menu-horizontal li li li:hover ul, .menu-horizontal li li li li:hover ul{
48 display/*\**/:table-cell\9
49 }

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.

1 <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

01 <?xml version="1.0" encoding="utf-8" ?>
02 <siteMap>
03  
04   <siteMapNode title="" url="">
05     <siteMapNode title="About" url="/enterwiki/Pages/Home.aspx"/>
06     <siteMapNode title="Business" url="/enterwiki/Pages/Home2.aspx">
07         <siteMapNode title="Business 1" url="/enterwiki/Pages/Home3.aspx"/>
08         <siteMapNode title="Business 2" url="/enterwiki/Pages/Home4.aspx"/>
09    </siteMapNode>
10    
11   <siteMapNode title="Divisions">
12       <siteMapNode title="Division 1" url="/enterwiki/Pages/Home5.aspx">
13           <siteMapNode title="Division 1a" url="/enterwiki/Pages/Home6.aspx"/>
14           <siteMapNode title="Division 2a" url="/enterwiki/Pages/Home7.aspx"/>
15           <siteMapNode title="Division 3a" url="/enterwiki/Pages/Home8.aspx"/>
16    </siteMapNode>
17     <siteMapNode title="Division 2" url="/enterwiki/Pages/Home9.aspx"/>
18   </siteMapNode>
19    
20   <siteMapNode title="Resources" url="/enterwiki/Pages/Home10.aspx"/>
21   </siteMapNode>
22  
23 </siteMap>

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

01 <asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
02 <!-- Original SharePoint ASP menu -->
03     <div>
04         <SharePoint:AspMenu
05       ID="TopNavigationMenuV4"
06       Runat="server"
07       EnableViewState="false"
08       DataSourceID="topSiteMap"
09       AccessKey="<%$Resources:wss,navigation_accesskey%>"
10       UseSimpleRendering="true"
11       UseSeparateCss="false"
12       Orientation="Horizontal"
13       StaticDisplayLevels="2"
14           MaximumDynamicDisplayLevels="0"
15       SkipLinkText=""
16       CssClass="s4-tn" />
17
18 <!-- Original sitemap DS -->
19     <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
20         <Template_Controls>
21             <asp:SiteMapDataSource
22               ShowStartingNode="False"
23               SiteMapProvider="SPNavigationProvider"
24               id="topSiteMap"
25               runat="server"
26               StartingNodeUrl="sid:1002"/>
27         </Template_Controls>
28     </SharePoint:DelegateControl>
29     </div>
30
31 <!-- Second SharePoint ASP menu -->
32 <div class="SecondNavigation">
33     <SharePoint:AspMenu
34       ID="CustomXmlNavigationAspMenu"
35       Runat="server"
36       EnableViewState="false"
37       DataSourceID="CustomNavigationSiteMapDataSource"
38       AccessKey="<%$Resources:wss,navigation_accesskey%>"
39       UseSimpleRendering="true"
40       UseSeparateCss="false"
41       Orientation="Horizontal"
42       StaticDisplayLevels="1"
43       MaximumDynamicDisplayLevels="3"
44       SkipLinkText=""
45       CssClass="s4-tn-second">
46    
47     </SharePoint:AspMenu>
48
49     <!-- Second sitemap DS -->
50     <SharePoint:DelegateControl runat="server" ControlId="CustomXmlMapProviderDelegateControl">
51         <Template_Controls>      
52             <asp:SiteMapDataSource
53               ShowStartingNode="False"
54               SiteMapProvider="CustomNavigationProvider"
55               id="CustomNavigationSiteMapDataSource"
56               runat="server" />
57         </Template_Controls>
58     </SharePoint:DelegateControl>
59     </div>
60 </asp:ContentPlaceHolder>

About sharepointsriram

9+ Yrs of IT experience
This entry was posted in Sharepoint 2010 Pages & Navigation. Bookmark the permalink.

2 Responses to Customize SharePoint Top Navigation Bar

  1. Bob Elander says:
    May 6, 2014 at 6:31 pm

    Good, but a little too much content for my taste. Please update for SharePoint 2013 when you have some time.

    Reply

Leave a comment