Skip to content

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

January 26, 2011

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.

/* 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.

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.

About these ads
86 Comments
  1. 10 thumbs up!

  2. Andrei permalink

    Does this work with Foundation 2010? The reason I’m asking is that I couldn’t find the “Navigation -> Check Sub Sites” option in my Site Settings…

    If it doesn’t, then what would be the easiest way to enable dropdown menus in Foundation 2010?

    Thanks!

  3. Hi Andrei, no this sentence is for SPS, foundation have some limitations regarding to
    the global navigation, I have updated the article now.
    One way to get around this could be to use another SiteMapDataSource.
    Try to replace the ASP menu in the master page with something like this:

    	<SharePoint:AspMenu
    	  ID="SPSiteMapProvider"
    	  Runat="server"
    	  EnableViewState="false"
    	  DataSourceID="SiteMapDataSource1"
    	  AccessKey="<%$Resources:wss,navigation_accesskey%>"
    	  UseSimpleRendering="true"
    	  UseSeparateCss="false"
    	  Orientation="Horizontal"
    	  StaticDisplayLevels="2"
    	  MaximumDynamicDisplayLevels="2"
    	  SkipLinkText=""
    	  CssClass="s4-tn"/>
    	  <asp:SiteMapDataSource runat="server" ID="SiteMapDataSource1" />
    	<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
    		<Template_Controls>
    			<asp:SiteMapDataSource
    			  ShowStartingNode="False"
    			  SiteMapProvider="SPSiteMapProvider"
    			  id="topSiteMap"
    			  runat="server"
    			  StartingNodeUrl="sid:1002"/>
    		</Template_Controls>
    	</SharePoint:DelegateControl> 
    
  4. Hi Christian,

    great article and thanks for your comment on my blog post on http://www.n8d.at/blog/sharepoint-2010/round-corners-in-top-navigation-of-sharepoint-2010/

    I also like your videos very much !!!

    Kind regards
    Stefan

  5. My eyes are now open! Great job, I am by no means a branding person or designer… fantastic job

  6. Delphino permalink

    Amazing article!

    I’ve found a minor error: when you add the custom provider in web.config, the path you give is “…/CustomSiteMap.sitemap” but the file name is “CustomSiteMap.xml”. I had to change the extension of the xml file to get it done.

    Also, I got 2 issues with the custom site map:
    1. The site map file doesn’t allow two SiteMapNode’s with the same url.
    2. The site map file doesn’t allow non UTF-8 characters. If I try to cahnge de codification, I got an error.

    Are there any workarounds for those issues?

    Thanks. I will keep reading this blog =]

  7. Hi Delphino, thanks for your found, I have now updated the file extensions to .sitemap in the instructions above.

    Regarding to your questions:

    1: It´s in fact so that you cannot have multiple nodes with the same URL, it´s the XmlSiteMapProvider that requires that the sitemap nodes have unique URLs. The only way I know to overcome this is to use querystring, like SomePage.aspx?p=1
    SomePage.aspx?p=2

    2: The common way for the sitemap is UTF-8. With this encoded the data values (including URLs) must use entity escape codes for the characters. If you type the URLs direct in the sitemap, you can use UTF-8 (hex) , take a look at this table: http://www.utf8-chartable.de.

    Thanks!
    Christian

  8. Delphino permalink

    Another question: Can I get rid of the original navigation bar and just use the custom one? I tried to simply replace the providers in the original navigation but it brings me javascript errors.

    Thx again.

  9. Delphino, yes you can delete the original navigation and only use the sitemap navigation.
    Try this:

    <asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
    <!-- 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>
    
  10. anantharengan permalink

    I want to bind site map to a sharepoint menu control . Hence i created a CustomNavigationProvider and had an entry like the following in web.config file

    and in my master page i had something like this


    UseSimpleRendering=”true” UseSeparateCSS=”false” Orientation=”Horizontal”
    StaticDisplayLevels=”1″ MaximumDynamicDisplayLevels=”1″ SkipLinkText=””
    CssClass=”s4-tn”>

    I want to bind my own customized sitemap with the Sharepoint Menu control .Kindly guide me on the following ?.I have my own sitemap and i want to bind it in the Sharepoint menu control that is my objective . Any code snippets,useful links and suggestions would be welcomed ?

    Thanks
    Anantha rengan.K

  11. Hi anantharengan, if I understand this correct you like to bind you custom sitemap to a SharePoint AspMenu control? If so, check my anwere to Delphino above, it’s just about DataSourceID in the menu control. Let me know if anything is unclear.

    • anantharengan permalink

      Thanks Christian Stahl for the reply . I will work on your solution and get back to you.

  12. khurram permalink

    Excellent piece! Tremendously helpful!

  13. Hi:
    Thanks for your post, However I am getting error message on ” DataSourceID=”CustomNavigationSiteMapDataSource”
    Error Message :
    Error Parsing Control : The file /_layouts/1033/styles/CustomNavigationProvider/CustomSite.sitemap required by XmlSiteMapProvider does not exist.

    Please let me know how to resolve this issue.

  14. Hi there Mr Rishkarthik, It’s seem like that the sitemap file cannot be found. The error message says that your file is CustomSite.sitemap, in my example I used the name ‘CustomSiteMap.sitemap’. Check the names and paths in the web.config and make sure it matches the name of the .sitemap

    / C

    • Thanks for your response. Now Its workinf fine. you saved me a lot. Thank you. by Karthik.

  15. Diky permalink

    Good article.. This is so helpfull for me.. But when i am trying this article, i have a problem to show the sub menu from dropdown… Anyway, where i must insert the submenu item??
    Thanks before..

  16. decay permalink

    Excellent article Mr. Christian Stahl, this is awesome, so helpfull for me.. i was trying this, but there’s some problem when i’m using CustomNavigationProvider to SiteMapProvider, the web is error, i was editing webconfig & creating sitemap.. i dont know where is the error.. But When i’m trying SPSiteMapProvider to SiteMapProvider, the dropdown is showing, but there something i dont want to. Actualy, where i should insert the dropdown item???

  17. Emilio permalink

    Excelente artículo!!

    Saludos desde Chile

  18. Kenn Powers permalink

    Fabulous!! We have been trying to find a solution to do this and this worked perfectly. I do have one question. We have a couple of links in our menu that are external. Is there a way to add an attribute to the sitemap file that resembles target=”_blank” in the anchor tab?

    Thanking you in advance.

  19. Hi Ken, thanx – If you try like siteMapNode title=”Resources” url=”/SomeSite/Pages/SomePage.aspx” target=”_blank” I think this should work for you?

  20. Mohan permalink

    I am facing the below error message. Please help me on this.

    Menu – CustomXmlNavigationAspMenuError parsing control: The DataSourceID of ‘CustomXmlNavigationAspMenu’ must be the ID of a control of type IHierarchicalDataSource. A control with ID ‘CustomNavigationSiteMapDataSource’ could not be found.

  21. Hi Mohan, first I would check the web.config file for a misspelling or character at the wrong place. Otherwise can you provide me with more details on this and did you follow this article or is this a general question about sitemap providers?
    / C

  22. Michael permalink

    For the CSS dropdown solution, not the tabs or jQuery, how do I actually change what the drop downs say? So the only change to the code I need to make is the MaxDynamicDisplaynumber? The rest can be done with CSS? Should I paste your CSS in the corev4.css file? Or make a new file and reference it in the master page?

    Thanks so much!

  23. Luiz Ferreira permalink

    Hi Christian,

    Great article! This is a life saver. But I have a little problem. The highlighted background on the selected menu item never shows when I select the home page. If I select the home page, the highlighted item on the menu points to the tab next to the home tab. Works ok with any other tab I select. Do you know how I can fix that? I am using sharepoint 2010. Thanks. Luiz

  24. Michael, if when it’s about SharePoint server, go to sitesettings / navigation for each site visiblie in the global navigation that has subsites you want to display as dropdowns.
    Next thing is to set MaxDynamicDisplaynumber in your custom masterpage. Don’t modify Core.css, create you own CSS file and reference this from the (custom) masterpage or paste the path for the
    file in alternate CSS url, http://YourSite/_Layouts/ChangeSiteMasterPage.aspx
    Hope this helps!

    Luiz, don’t think I have seen this.. Do you use SP foundation?

    / C

  25. Khalid permalink

    Hi Christian, That is awesome!.
    I have a question though, can link the original navigation with the sitemap navigation?
    Is there a limit for the custom site navigation that I can use?
    Thanks sooooooooo much.

  26. Michelle permalink

    Love your blog! But I’m just wondering if you know if it’s possible to activate the double drop-down menu without SharePoint Designer?

    Thanks so much!!!

  27. santu permalink

    Hi Christian,
    amazing article, thanks for posting.
    I got a question when I use the two global navigation, the custom one is not getting any css styles.
    can you please to fix that. am I missing any thing. the following line of code mention css classes which I dont see in corev4 css or your custom css

    CssClass=”s4-tn-second”>
    Please let me know where these css classes are…thanks again

  28. Hi Christian, That is nice…
    its aweosem work in css menu…
    thanks….

  29. Steve permalink

    Christian,

    Great resource. This works perfectly with one expection. It appears _layout pages (or any page that uses the application(v4?).master masterpage don’t inherit these changes. Any ideas why this would happen and how to fix this? This is the one hiccup to us using this in our production environment.

  30. Orrin permalink

    Thanks for the article

    I can’t see my customized navigation in viewlst.aspx, or settings.aspx. How can I fix it?

    Thanks

  31. Hi Steve, thanks!

    Do you have a custom master and have set this as a site master and a system master? One thing more to check is in Central admin, make sure that the web application is set to yes, see ‘Master Page Setting for Application _Layouts Pages’.

    If you still having issues regarded to this, send the master and the css with printscreens describing all steps to sharepointdesigner[at]hotmail.com

    / C

    • Steve permalink

      Hi Christian,

      I sent you an email, and outlined that I followed all of the steps you mentioned above, and included the exact same CSS that you provided. Everything works fine, except that the global navigation does not display on the safe-guarded _layout application pages:

      •AccessDenied.aspx
      •MngSiteAdmin.aspx
      •People.aspx
      •RecycleBin.aspx
      •ReGhost.aspx
      •ReqAcc.aspx
      •Settings.aspx
      •UserDisp.aspx
      •ViewLsts.aspx

      SharePoint is reverting the masterpage to the default top navigation on these pages. Any idea why?

      -Steve

  32. Ray permalink

    Thank you for the great article. My question is…. will this work for Publishing sites? From what I understand the master page and navigation sitemap providers are different Thank you

  33. Thanks for the article, really great.
    I have a question, why the selected design is only on the root menu item, even though I selected other menu item.

  34. Hi and thanks for all comments, Ray yes this will work for publishing sites. Adilsuza, it ‘should’ reflect at other menu item that the root items. Have your custom css / masterpage inherit down to sub level sites? Otherwise can you give me a bit more explanation in detail?
    / C

    • Thanks for the prompt reply, I’ve posted the question in details here http://sharepoint.stackexchange.com/questions/31208/sharepoint-2010-foundation-top-navigation-bar-drop-down-menu
      Could you please give it a look. Thanks.

  35. Volmiro permalink

    It works great. Thank you for the post. I have a question. How can I change the background of the drop down menu? I mean I want to have different color for each levels of the drop-down menu. Thanks

  36. Hi Volmiro, when it comes to sites that are nestled a bit deep in the site hierarchy, it’s important to specify the cascading of the DOM three exact to handle the styling of global navigation like if some level is differnt from others. The control gives us a special class called li.dynamic-children that can be seen as the third level. You can change the drop down per level with only CSS like this:

    .s4-tn ul.dynamic > li.dynamic-children > ul.dynamic > li.dynamic > a {
    background-color:red
    }

    But you cannot just add this with the other classes, you will need to rewrite the other CSS classes a bit to get this working. Try to use only this class and add class to class until you get what you want. Another option is to use jQuery to manipulate the DOM, but try CSS so long as you can before that.

    / C

    • Volmiro permalink

      Christian, thanks for quick reply and thanks for the tip. I have just rewrote the other CSS classes and I have different colors in each sub-levels.

  37. Jeff permalink

    Thanks for the nice article.

    I have a question. I donot plan to display subsites in the tree structure. I want to implement tree structure
    Ext

    A B C
    A1
    A11
    A12
    A2
    A21
    A22
    A23

    etc. Please let me know.

    Thanks,
    Ephraim

  38. Volmiro permalink

    Hello,
    After I activated my master page at site collection level, it sometimes does not show the drop-down menu, when I open the site. What can be the problem? Any ideas? It does not happening all the time, but it will be a problem for the end users.

    Thank You

  39. loresylvana permalink

    Dear Chris,

    Could you please elaborate how to achieve to add sub link under link, as above Department top navigation example.

    Thank you

  40. Dear Chris,

    Could you please elaborate how to achieve above department top navigation menu ( add sub link under link / nested fly out menu) ?

    Thank you.

  41. Hi Christian, great post. I have an MSO Intranet in Sp2010. OOTB behaviour means the left nav menu is set to 2 levels alone. How do I make this 4 levels. I cant install server side code on an MSO platform, sandboxed solutions are probably my only resolution other than a quick fix. Thanks in advance for your help.

  42. Chris will this solution work across site collections? After reading many different solutions across the web it seems that getting a global navigation solution that works across site collections can be pretty complicated. Your solution seems so straight forward I’m going to try it anyway! Thanks for the wonderful explainations!

  43. Yoshi permalink

    Hello

    Thank you for the solution. My question is about Site Map Providers, when we create a custom one does it automatically pick up and new pages or subsites? For example if I am connecting my site map provider to an xml file, will I have to continually update the xml file to host a new page or subsite or will it automatically be entered in the xml file?

    Thank you.

    Yoshi

  44. Sindhuja permalink

    Hi ,
    Iam new to CSS.I have been trying ‘CSS FOR DropDown menu’.
    Iam getting an error for filter and -ms-filter properties that these properties are marked invalid in sharepoint designer.Also that when I run Developer tools(IE8) Iam getting syntax errors.Could you help me with this.
    Thanks!

  45. HI Sindhuja, I can verify this now in IE8, could be a rendering bug and I know this version can have some issues sometimes but try this page and see if you can see any gradient in your IE8 http://samples.msdn.microsoft.com/workshop/samples/author/filter/gradient.htm – if you still having trouble with this just delte the filter row in the CSS.

  46. RandyS permalink

    Hi Christian, using your example for SharePoint 2010 Foundation, I can get a dropdown nav menu working that shows me the sites/subsites within my site collection. However, I need to be able to create links on the menu to list or documents that are high usage. For this I need to use a SiteMap, but no matter what I try I get only errors. When I create everything in SharePoint Designer, it shows me the correct nav bar in the Design view, but when I try to open the actual site in IE, all I get is an error page. When I check the logs, the error message is that it cannot find the folder that contains the sitemap, which i put in _layouts/1033/styles/. Any advice?

  47. Hi there Randy, Can’t say for sure why but I would first double check the names and paths in the web.config and make sure it matches the name of the .sitemap

    Virtual path including the filname with the extension sitemap:
    “/_layouts/1033/styles/CustomNavigationProvider/CustomSiteMap.sitemap”
    Folder:
    \14\TEMPLATE\LAYOUTS\1033\STYLES\CustomNavigationProvider

    / C

    • RandyS permalink

      I tried to switch over to an XmlDataSource, as shown below:

      But I get this error: “The control type ‘System.Web.UI.WebControls.XmlDataSource’ is not allowed on this page. The type is not registered as safe.”

      Even though this control type is in my web.config and is a standard datasource for SharePoint. Nothing has worked so far.

      • HI Randy, if you switched to the XmlDataSource try set it as a safe assembly in the web config:

        <SafeControl Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" Namespace="System.Web.UI.WebControls" TypeName="XmlDataSource" Safe="False" AllowRemoteDesigner="False" /
        
      • RandyS permalink

        Unfortunately that didn’t work either. I’ve gone back to your original idea and my code is:

        when i use the above code, SharePoint Designer renders the new nav bar properly in Design view in the bottom half of the split screen. This proves that Designer can find the SiteMap file. However, when I open the site in IE I get this error message:

        System.Web.HttpException: The SiteMapProvider ‘MyNavProvider’ cannot be found.

        So, SPD can find “MyNavProvider” in the web.config file and render the new nav bar, but IE cannot. Any thoughts on this issue?

      • Volmiro permalink

        Hi RandyS,
        You can try to add your Site Map to _app_bin folder, and make sure you have the correct path in web.config.

        <add name="” siteMapFile=”/_app_bin/.sitemap” type=”System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a” />

      • RandyS permalink

        Still says: The SiteMapProvider ‘MyNavProvider’ cannot be found. I deleted the custom master page and created a new one, dropped the code back in and still get this error. Just so you know, this is not a normal install of SharePoint 2010 Foundation, this is an install of Search Server 2010 Express, which has Foundation as its base. Could that be causing issues?

  48. RandyS permalink

    Just wanted you to know I created a VM setup exactly like our development environment, but used SharePoint 2010 Foundation instead of Search Server 2010 Express. I then modified the master page as you recommended and added my new sitemap to app_bin, and the new dropdown nav bar works great. The problem appears to be due to Search Server 2010 Express.

    Thank you for all of your help!

  49. Thanks Randy for letting us know, and I’m glad that you found the differences, I hope you can manage to do this in another way even if it’s about the Search Server Express. Take care!

  50. Markus permalink

    Hey,
    Thanks for the great tutorial, but somehow the navigation bar is only applicable for me as a site-owner, not for any other user. I used your foundation solution.

    Is it only a permission issue? Thanks !!!

    • Markus permalink

      Works now, had to Check the Master Page in (*slap my head against door*)

  51. Hi Christian,
    Thanks for great Navigation customization article, I successfully applied all the navigation to my root site collection site. I used SharePoint Designer to achieve all the suggested changes.
    When I log into the site with another user credentials, structural changes to the master pages appear, but none of style changes for Navigation done in the CSS appears. I am just not able figure out why.
    Thanks for help and time,
    Lokesh

    • Fantastic drop down global menu.
      But i have an issue using it in a blog site.It works but i can get it to show the child menu when i hover.
      Any ideas?

  52. Interesting article. I have been tasked with providing a drop down menus that appear when a users hovers or clicks on a image on the page – a sort of horizontal accordion. I just wondered if you have tried anything like that? If so any tips/gotchas? I am thinking either a fixed set of links or a dynamically generated set of links; possibly security trimmed. I have been told to give the portal the “Wow” factor so no pressure there ;-)

  53. Hi Westerdaled, that’s an interesting task. I have not tried this but spontaneously I would try to bind an image to a specific link and use css/jQuery for the ‘Wow’ feeling. Maybe you can create a lookup column in the image library to the ID in a link list and use a data view part that does the connection and logic? I wish you good luck with this challenge, I hope you can publish a blog if you find a good solution for this.

  54. Thanks much for a great article series. I ran across it yesterday after days of searching for a dropdown menu solution.

    I have the “basics” implemented from part III but I only get one level of drop down menus even though I have changed the “MaximumDynamicDisplayLevels=2″ and have verified that all sites have subsites checked within the navigation settings.

    What might I have missed?

  55. Hi PegH, are you using this in SharePoint Server or foundation? Are you sure you have applied your custom masterpage at the subsites? Everything related to this is checked in & published?
    / C

  56. Mandeep permalink

    Hi Christian,

    Sorry if I am missing the point here, but can this be used to create a consistent top bar navigation across site collections? Or is the scope of this limited to single site collection?

  57. Hi Mandeep, the primary scoope is for a single singel site collection, but take a look at the part about how to create a custom site map provider with this can be used over multiple site collection.
    / C

    • Mandeep permalink

      Hi Christian, Thanks for the reply. Is it possible you could provide me a link here or some sample code to achieve this.

      Thanks
      Mandeep

  58. Viresh permalink

    Hi Christian,
    I am using seperate CSS classes for my top navigation, which means that ineats of using a list , Sharepoint now generates table structures. Will the method above still work.. or would I have to amend it in some way.

  59. CASE permalink

    Thank you for this article. I am able to implement it in SharePoint 2010, but when I do so, I cannot navigate to the main page using the “Page” ribbon. Any advice?

  60. pandu permalink

    Thanks for the article, does this work for Office 365 SharePoint or not?

  61. Hey dudes, yeah all CSS/jQuery/MasterPage stuff will work with SharePoint Online / o365, except for the double navigation thing where you’ll need access to the server it self.

  62. Viresh permalink

    Hi.
    I am using seperate css and have put off simple rendering for my topnav, which means that the nav items are rendered as tables instead of list items. How would I go about adding a hover delay in this case?

  63. I read this post, it’s nice and helpful post for sharepoint developer.jquery and css is easily use and more iteractive design for website.thanks for sharing worth information.

  64. Cole S permalink

    Chris, this is brilliant stuff. However, the CSS does not work with IE10. I’m using the non jQuery version, so it’s just the sitemap and CSS. Works great in IE8 and IE9, IE10 does not display the dropdowns. Any thoughts?

  65. Naveed permalink

    top stuff Christian!

  66. Arifin permalink

    Hi Christian,

    how about if the menu coming from sharepoint list? is it possible?

  67. Hi Christian,
    I am kind of working with your custom navigations however i was wondering if you can throw some light how we approach for customizing Left Navigation in Sharepoint 2010.

  68. Johnny V permalink

    Great write up! I do have a question/issue. The sitemap navigation show up on the pop up pages as well. For example when creating a new page, new site or uploading a document. Is there a way to not have it show up on these pages. I know this is an old post but hopefully you can give me a hand.

Trackbacks & Pingbacks

  1. Customizing SharePoint 2010 global navigation with Css and jQuery – Part II « Me & My SharePoint Designer
  2. Customizing SharePoint 2010 global navigation with Css and jQuery – Part 1 « Me & My SharePoint Designer
  3. SharePoint Daily » Blog Archive » Office Helps Microsoft Earnings; Is WP7 Dead?; Companies Average $6,300 on Cloud Computing
  4. Customize SharePoint Top Navigation Bar | Sharepoint Sriram
  5. Customizing SharePoint 2010 global navigation with Css and jQuery | Share your knowledge

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,153 other followers

%d bloggers like this: