Skip to content

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

November 4, 2010

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 >

About these ads
52 Comments
  1. Patrik Edfors permalink

    Thanks Christian, this is exactly what we have been looking for! Since we have a strong graphical image to follow its important to also have our own look and feel to the menu buttons. Fantastic great work of you to find an easy and proper way to achive this without use of images to customize the look of SharePoint navigation menu. Looking forward to your coming articles.

  2. Emmanuel Baron permalink

    Very good Christian, thanks ! Looking forward to your coming articles.

  3. Thanks Chris! Excellent! As always your expertise as made my job much easier.

  4. This is a good blog message, I will keep the post in my mind. If you can add more video and pictures can be much better. Because they help much clear understanding. :) thanks Pickhardt.

  5. Thank you all for Comment and for all other mentions around! As promised i´ll soon publish the next article about how to extend the global navigation with jQuery that compliments the look with feeling. Btw this post is now updated with a HD video. Stay in tune!

  6. Larry permalink

    This is a good article. It’s unfortunate that my company is not upgrading for some time. Do you know other similar references like this for MOSS or sp 07?

  7. Hi Larry, I hope your company will upgrade sooner or later. I hav´nt seen a simular reference for MOSS but some of this will work much the same way. Ok, the menu control in 2007 has no simple rendering mode, so it´s a bit more to work to set custom styles or do jQuery tweaks when we have to deal with table markup.

    / Christian

  8. Dejan permalink

    Hi Christian,

    Great blog by the way.
    I do have one question for you. Do you have images of other exampes you used. For example you wrote in this blog:

    “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.”

    Can I somewhere download images…specially one with pyramid design.

    Kind regards,

    Dejan Dujak

  9. Mahmoud Omar AlGoul permalink

    Thanks for the article, i have one question i added the Blue.css but mouse over not working any help please

  10. Excellent post and clear instructions. I was able to setup my navigation following your instructions. Thank you so much.

  11. Hi Mahmoud, the mouse over should work with this blue.css in the major browses, what browser are you using and have you modified this css in some way or have other kind of branding that interacts in some way? Are you running the V4.master or a modified version of this master?

  12. Dude… this is a fantastic post, I sent it to my work, my tweets and my FB Page.. everyone should see this, i bet you have hours if not days of someone elses life..

  13. Phil permalink

    Hi,
    Do you have the code for the bottom example of the four in your sample?

  14. Ridha permalink

    Thank you.. It helps me so much…

  15. Ivan permalink

    I am a complete newbie and am trying to follow the steps, but I am not understanding correctly.

    I have a site called Debugging. I created a css file called Blue.css and stored it in \Style Library\ (\Style Library\Blue.css). Blue.css contains the css contents you provided. I then opened the default.master page in SharePoint Designer 2010 and added the SharePoint:CssRegistration line…

    I save the default.master page and when I refresh my site, I see nothing different. What I am missing? Thank you for your help in advance.

    • Ivan,
      I have added the SharePoint:CssRegistration line on both (default.master) and (v4.master) pages pointing to the file (blue.css) that i put on “/Style Library/Blog/” but there is no effects on my sharepoint site.

      Did I miss something?

  16. Ivan permalink

    I figured out my problem… I made the reference to the blue.css style sheet in the wrong master page (default.master). It turns out, my site was using v4.master. I cloned v4.master, referenced the style sheet and designated the cloned v4.master page as the Master Page.

    Your post helped a ton. Thank you.

  17. Wow! This is awesome, I have been looking for an article like this for a long time. I can’t believe how easy it was to find your website with a YouTube Video. Just goes to show why YouTube is the second largest search engine. Any way, I currently operate off of a Mac and I am thinking that I will need to get VirtualBox or Parallels to run Sharepoint Designer.

    Do I have to use Sharepoint Designer to make Edits? Or is their a different way since I am on a Mac? I use a RDP client to access the windows server but I have no idea how to access the themes in SharePoint going that route. I am a total N00b so forgive me if I ask dumb questions. Any help would be appreciated thanks! Seriously any resources would be helpful, and I will subscribe to the comments so I don’t miss anything.

    Thanks,

    Wes

  18. Hi Wes, and thanks!
    SPD is for windows, so the way to go is by virtualization like the tools you mention. I have not much experience in the worlds of mac. SPD is a free software, so once you have set this up you can just go ahead and start branding! I would recommend you to join a course or buy a bok about about SPD as well. Good luck!

    • Thanks, sounds good, I currently have SP setup on a Rackspace server running windows server 2008. I use a RDP client and I just installed SPD on that server so I have the ability to make edits from their. I was just hoping for a solution on a Mac, but this will work and probably makes more sense I connect to the server from multiple computers. Nice blog keep up the great posts it’s really help for newbies like me!

      Thanks

      Wes

    • Merry Christmas Chris and Everyone, finally holiday is coming. Cheers!

  19. ZAHEER AHEMAD permalink

    Mind blowing Christian !!! thnx for your work.

  20. Hi.
    Great Post.
    can you please email me the TabImages.zip …i cant seem to download it.
    you can send it to chocster AT gmail DOT com

  21. Do you have issues with changing the “height” of the tabs? I’ve not located a class within these to allow custom tabs, (with different heights). The selected is there, not sure the unselected tab is?

    Curious… :)

  22. Hi,
    I’ve tried to follow the steps, but still nothing change on my site. I’ve added the CSS on the “Style Library” folder(\Style Library\Blue.css), and also added the SharePoint:CssRegistration line pointing to the CSS file.
    Firstly I modified the master page (default.master), and then update the v4.master page. But both all give me no impacts on the site.

    Anyone can advise?

  23. Kevin permalink

    Hi Chris,

    Thanks for sharing this great solution. However, I have one downside: the flyout menus are a bit to slow, at least with me. It takes 0,5 sec before the menu collapses again.

    Is there anything I can do about it? Because it is just the OOTB global navigation.

    My SiteMapProvider is currently SPNavigationProvider and in the web.config my setting is as follows:

    I hope you can give me some advice on this issue.

    Thank you,

    Kevin.

  24. chai permalink

    Rocking Chris…………………………….>>>>

  25. This blog has got some extremely helpful information on it! Thanks for helping me!

  26. Dhanya permalink

    great!! thanks a looot

  27. Hello Chris, really wonderful effort.
    I have one doubt, in the .css file you mentioned some class names as .menu-horizontal etc.
    How to see those class names in the v4.master page? I searched but not identified for me. Am I looking in the wrong place?

  28. Hi ysssm, the navigation control (embeded in code) itself contains markup with some of this classes, a few classes often wrappers can be found in the master page. Take a look what’s renders on the page (DOM), use view source or IE developer toolbar where you can see the markup with the class names.
    / C

  29. Raj permalink

    Hey Chris,

    A big thank u did this effort and sharing the outcome with all :)

    I do also have the sane question though as posted by another user (Kevin) here

    “Hi Chris,

    Thanks for sharing this great solution. However, I have one downside: the flyout menus are a bit to slow, at least with me. It takes 0,5 sec before the menu collapses again.

    Is there anything I can do about it? Because it is just the OOTB global navigation.

    My SiteMapProvider is currently SPNavigationProvider and in the web.config my setting is as follows:

    I hope you can give me some advice on this issue.”

    But again, thanks v much for all the effort !

  30. Hello Rai, hard to say what causes the performance issues, within only a smaller portion of CSS you should not normally have issues here. Try to use Firebug and if you can see what’s going on with the loading time. Are you using custom CSS in style library before in this environment, and have no issues? Otherwise you can try to store the CSS file at the image folder, a subfolder to Images and set cache to the file type in the web.config. The reasons could be many, but I hope you found the reason, thanks posting.
    / C

  31. Hi,
    This is an excellent post. I just have one quick question. If there is a sub-menu (child record)(level 2), how does the user know by looking at the menu that he has to hover on it to see the next level menu?

    Can we add something for that?

    Thanks.

  32. Hey DG, that’s a great question. One suggestion is to separate subitems that got childs from the subitems that don’ have any childs in the dropdown with help of diffent border color or add an background image for the ones with a child. If you view the source of the page you’ll find the DOM three and you’ll be able to track the level of classes you need to change.

    As an example you can use this:

    ul.dynamic > li.dynamic{
    background-color:green;
    padding-left:3px
    }
    ul.dynamic > li.dynamic-children{
    background-color:red!important;
    }

    / C

    • Hi,

      Thanks for the reply. I think you did not understand my question. What I mean is this:

      Item A | Item B | Item C | Item D
      Item D1
      Item D2
      Item D3

      Just From looking at the menu, how will a user know that Item D has got second levels. The user is unable to determine till he hovers on the menu item. Is there a better way?

      • Hi,

        Thanks for the reply. I think you did not understand my question. What I mean is this:

        Item A | Item B | Item C | Item D
        Item D1
        Item D2
        Item D3

        Just From looking at the menu, how will a user know that Item D has got second levels. The user is unable to determine till he hovers on the menu item. Is there a better way?

  33. Robert permalink

    Hello Christian and thanks for this menu series.
    I have tried the CSS in Part 1 and it styles my menu bar as expected. However, when I click on a menu choice it does not stay selected (highlighted) as shown in your video.
    In the video you begin on the Wiki page and the menu selection is highlighted. When you click on Blog the blog selection stays highlighted. My menu selections do not stay selected. Is there something I’m missing here?
    Thanks for your help.
    Roberrt

  34. Hi Robert, I have just test this back at my old SP 2010 machine. I got this working like the video, the top item stayed selected after a click. I tested this with both a page link as well as a site link in the global navigation in IE 9 and in Firefox. Used dev toolbar to verify this in IE7/IE8 mode as well. Can’t say what it causes this for you.. SharePoint Server 2010? What is the settings for the X-UA-Compatible tag in the master page? Do also check if you have more custom CSS that maybe render as last class for the selected?

  35. John Ferguson permalink

    Hi Christian, very helpful page! Thanks for sharing. Can you repost the images for the tabbed navigation. They are no longer available on the link you provided. Thanks!

Trackbacks & Pingbacks

  1. Frank MacDonald » Customizing SharePoint 2010 global navigation with Css and jQuery …
  2. Customizing SharePoint 2010 global navigation with Css and jQuery … « Zipsite.net
  3. Jose M. Tamez | Ussing CSS to Create Tabbed Nav
  4. Customizing SharePoint 2010 global navigation with Css and jQuery – Part III « Me & My SharePoint Designer
  5. Custom CSS to SharePoint 2010 Master Page « Virtualize SharePoint, SharePoint Virtualization, Virtualization Tips
  6. SharePoint 2010 Top Navigation Customization « intranetsharepoint
  7. Customizing SharePoint 2010 global navigation with Css and jQuery | Virtualize SharePoint and SharePoint Virtualization
  8. SPPD158 SharePointPodcast | SharePointPodcast
  9. Customizing the Global Navigation in SharePoint with CSS, JQuery, and Superfish « Musings by Generator
  10. Customize SharePoint Top Navigation Bar | Sharepoint Sriram
  11. Branding the Sharepoint 2010 Top Navigation | Ammar's IT Blog
  12. Customizing SharePoint 2010 global navigation with Css and jQuery | SharePoint Links

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,225 other followers

%d bloggers like this: