Skip to content

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

November 16, 2010

Thanks for all the responses and comments about the previous article!
Ok, time to check out how we can create awesome animations for the navigation.

The articles in the series:

  1. Introduction and How to customize the global navigation with CSS – Part I (previous post)
  2. How to customize the global navigation with CSS and how to extend it with jQuery, in this example animating the menu. (this post)
  3. Tips and tricks about navigation settings, how to use different site map providers & multiple navigation providers, branding dropdown menus and more.

These videos shows the results of the two examples that are included in this post:


In the previous article, I described some example of how to set custom styles to the global navigation with use of CSS. In this article we’ll examine this more and look at two example of how to animate the navigation with help from our friend jQuery.

The jQuery library provides several techniques for adding animations. These include all from simple animations to more sophisticated custom effects. To perform animation of CSS we can use .Animate() that is a part of jQuery API. We can also use a project called jQuery UI to extend the animate function with such as animate colors.
Read more about this here: jQuery .Animate() and jQuery UI

Example 1: Animated the tab navigation:
First of let´s take a look at how to make the buttons in the top navigation top jump up a bit when hover. In this first example we will use plain .Animate() from the core. Here are the steps, so let’s go:

  1. Include a reference in your custom master to latest jQuery
  2. Include a reference in your custom master to a custom CSS:
  3. Include the jQuery into the head section of the master page:
  4. Do the CSS magic:



(1) Reference to latest jQuery:

<script type="text/ecmascript" src="/Style Library/Jquery/jquery-1.4.2.min.js"></script>

(2) Refence to your custom CSS:

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

(3) The jQuery:

<script type="text/ecmascript">
$(document).ready(
 function () {
	$(".menu-horizontal ul li a").hover(
	
		function() {
    	$(this).stop()
    	.animate({ height: "62px",
    			marginTop: "-5px" 
    			}, 200);	
		},
		function() {
    	$(this).stop()
    	.animate({ height: "31px",
    			marginTop: "0px" 
    			}, 200);	
			       	   
	});
});
</script>

(4) The CSS:

/*---| By @Cstahl 2010 |---*/
.s4-toplinks{
margin-top:4px;
}
#s4-titlerow {
background-color:#7fc2d1
}
.menu-horizontal{
margin-left:5px;
}
.menu-horizontal ul li{
text-align:center;
font-size:11px;
line-height:18px;
padding:0;
margin:0;
height:27px!important;
}
.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;
height:27px!important;
}
.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;
text-decoration:none!important;
}
.s4-toplinks .s4-tn a.selected{
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:0px;
margin-right:1px;
margin-bottom:0px;
margin-left:1px;
border:0px;
border-top:1px transparent solid;
border-right:0px transparent solid;
border-bottom:0px transparent solid;
border-left:0px transparent solid;
}
.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;
}
/*----- 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-title-inner{   
background: -webkit-gradient(linear, left top, left bottom, from(#a0d9e6), to(#7ec1d0)); /* WebKit (Safari, Google Chrome etc) */
background: -moz-linear-gradient(top, #f7f7f7, #7ec1d0); /* Mozilla/Gecko (Firefox etc) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0); /* Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#a0d9e6, endColorstr=#7ec1d0)"; /* Internet Explorer 8 */	
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;
}

Your result should look something like this:

You can download the tab images here.

Example 2: Animated the backgrounds with hover:
In next example we will take advantage of extensions to the animate function that´s included in jQuery UI, to make a smooth color shifting when hover the navigation:

  1. Include a reference in your custom master to latest jQuery
  2. Include a reference in your custom master to jQuery UI (effects.core)
  3. Include a reference in your custom master to a custom CSS:
  4. Include the jQuery into the head section of the master page:
  5. Do the CSS magic:


(1) Reference to latest jQuery:

<script type="text/ecmascript" src="/Style Library/Jquery/jquery-1.4.2.min.js"></script>

(2) Reference to jQuery UI:

<script type="text/ecmascript" src="/Style Library/Jquery/jquery-ui-1.8.5.custom/development-bundle/ui/jquery.effects.core.js"></script>

(3) Refence to  your custom CSS:

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

(4) The jQuery:

<script type="text/ecmascript">
$(document).ready(
 function () {
	$(".menu-horizontal ul li a").hover(
	
		function() {
    	$(this).stop()
    	.animate({ height: "31px",
			       backgroundColor: "#3185b7" }, 600);	
		},
		function() {
    	$(this).stop()
    	.animate({ height: "31px",
			       backgroundColor: "#4fb3d3" }, 600);	
			       	   
	});
});
</script>

(5) The CSS:

/*---| By @Cstahl 2010 |---*/
.s4-lp, body #s4-topheader2{
background-color:#4fb3d3;
margin-left:0px;
border-top:0px;
border-bottom:0px;
margin-left:0px;
}
.menu-horizontal{
margin-left:10px;
border-right: 1px #81C8DF 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 #81C8DF 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:#4fb3d3; 
padding-right:18px!important;
padding-left:18px!important;
}
.s4-toplinks .s4-tn > .menu-horizontal ul li a:hover {
text-decoration:none!important;
color:#000!important;
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(#036ba8), to(#81C8DF));
background: -moz-linear-gradient(top, #036ba8, #81C8DF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#81C8DF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#036ba8, endColorstr=#81C8DF)";
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:#fff;
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;
}
/*----- 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;
}

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

About these ads
36 Comments
  1. Aamir Bashir permalink

    Thanks for nice article :P

  2. Emmanuel Baron permalink

    Thanks Christian, good post !!

  3. Martin Swinkels permalink

    Great article! Can’t wait till next one :-) It realy helped me a lot in understanding the basic concepts.

  4. @Christian: i have a requirement to provide a specific ‘icon’ image for each static item on my menu (this is custom branding for a public SP internet site).

    In essence, instead of the same image used for all static items, I need to have an individual icon for that specific item. I am able to do this by specifying StaticItemTemplates, and providing my own html there however, that forces me to set UseSimpleRendering=false, which yields the old rendering from 2007, with nested tables and the weird iframes.

    Is there any way to provide individual images for each static item, while leveraging only the Simple Rendering, CSS, and perhaps some jQuery??

    –Thiago

  5. You don’t know how happy this article made me. I’m a novice when it comes to SP design/development but I’m fine managing a SP site. Trying to move from a SP 2007 site to SP 2010 site but didn’t have person that designed the original site available to help with the customization work. This did the trick and I’m a lot closer than I was. Thanks!

  6. Thanks for your comments!

    Regarding to Thiagos question about individual icons per Item in the global navigation; it´s in fact that you cannot use the SimpleRendering mode true here in a easy way when this gives no ID per Item. Maybe you can use jQuery to loop through and set Id or something like that?.

    One other way could be to use an XML sitemap (se my article 3 in this series) if you do that you can write your own markup for the ASP navigation, this would do it I think.

  7. Glen Wolinsky permalink

    Christian,

    Thanks for all this work and advice. I’m an extremem newbie to this and your articles have been a great help. I implemented the tabs version of the top-level navigation. I even customized some things myself to change the tab graphic and the font characteristics.

    One thing I can’t figure out, though. Each of the tabs represents a sub-site. The tabs list stays the same no matter which site you’re currently viewing. However, I’d like the tab for the currently-viewed site to be a different color than all the others. I can’t seem to figure out how to do this. Can you perhaps point me to the CSS I would need to alter?

    Any help would be greatly appreciated.

    Thanks,
    Glen

  8. Bob permalink

    Hi,

    the blue animated worked great for me, but none of my users see the changes. I would think it is a checked in issue, but I believe everything is checked in. Is there somehting I am missing to have the changes published to all my users? -Thanks

    • N03L permalink

      Bob.
      Make sure that you check-in and publish the masterpage and the style sheet that you’ve modified.
      And double check that once the files are published that you approve the published version.
      That’s bitten my bum once or twice.

      N03L.

  9. Chris permalink

    Hi! Great job :-) But the second exmample Example 2: Animated the backgrounds with hover did not work for me :-( if I change the fontSize or animate margin, it works like charm, but it’s not possible to change the backgroundColor. Jquery and jquery ui are up to date. Can you please help me

  10. Tnx Chris, well this ‘should’ work, which browser & version are you using? You can drop me a mail with the master and the Css file, and I’ll try to help you – sharepointdesigner[at]hotmail.com

    / C

  11. John permalink

    Fantastic! You’ve opened a lot of doors for me. I’ve officially achieved junior rock star status in my company.

  12. Darwin permalink

    Genial post!!

  13. Roddy Goodman permalink

    This is great but the background gradient does not seem to rending in IE9.

  14. Tnx Roddy, can’t really say why you can’t see the gradients in your IE9, take a look at this page if you can try different gradients until this works, http://webdesignerwall.com/tutorials/cross-browser-css-gradient ? Btw what is the doc type set to in your master page?

    / C

    • Roddy Goodman permalink

      I did some playing around and have the ms-filter working now. This is a great resource Christian!

  15. Dan permalink

    Hi,
    Bit of a late comment but I can not get the -ms-filter and filter to work,it says that they are not supported by the current schema. I have tried changing the doctype but that didn’t help.
    Any ideas?
    Thanks

  16. Lauren permalink

    How you were you able to put the tabs in non-alpha order? I’d like to customize my menu like yours but my sites are defaulting to alpha order. I’m working in SharePoint Foundation.

  17. Gilles permalink

    Great article Christian as usual. Thank you very much for posting.

    • Gilles permalink

      Chris

      I image has to be in certain width size…? i tried to create image and make it work…it works fine but i am seeing some white space it does not look nice.

  18. Gilles permalink

    Christian

    how to change the left navigation panel bakcground color…? (on Quick Launch)

  19. Kevin permalink

    Hi Chris,

    Great article, however I’m not able to figure out how to change the color of the active tab when the popped out menu is active.

    E.g.: I have a site1, with two subsite1 and subsite2. When I hover over the menu (site1), it pops out and I see the two sub items (subsite1 and 2). But my active parent item (site1) doesn’t stay selected. Is there a way to get this working?

    Thank you.

  20. Gilles permalink

    Chris
    Great artcle, after applying this master page, the font colors on settings.aspx page the others settings page like areanavigationsettings.aspx has changed since its white color i could not see the text. any idea…?

    Thanks

  21. SPbb permalink

    Christian,

    This is an awsome blog thanks alot for sharing.

    I need a little help here. The animated one I cannot get it to work.

    Do I miss something? actual code below (SPS2010 Online /365)

    $(document).ready(
    function () {
    $(“.menu-horizontal ul li a”).hover(

    function() {
    $(this).stop()
    .animate({ height: “62px”,
    marginTop: “-5px”
    }, 200);
    },
    function() {
    $(this).stop()
    .animate({ height: “31px”,
    marginTop: “0px”
    }, 200);

    });
    });

    Thanks Man!

    SPbb

  22. SPbb permalink

    Christian,

    I’m a bit confuse with the

    Example 2: Animated the backgrounds with hover:

    number 2 and 5.

    Do I need to copy the codes of no5 and save to no2 “Blog_jQuery_Blue_BgColorAnimations.css”?

    Please help.. thanks!

    SPbb

  23. Senthil permalink

    good article. Saved my time, Thanks

  24. Hi Christian Stahl, YOU ROCKS!

    Abdiel, here from accenture singapore! i learned a lot from your blogs keep on posting!

  25. Uzma permalink

    Great blog! What do you need to do to address long site names as when I hover over a subsite, the image is static and therefore the subsite name no longer fits within the tab?

  26. Ken Thompson permalink

    Dear Chris first of all thank you very much for you post it’s a big help.

    Hope you or someone else can help me because I have to following problem.
    http://gthews.com/1.PNG

    As you see in the picture the 5th navigation point has background. How can I fix it?

    Thanks for your help

  27. Ken Thompson permalink

    I found the solution on my own.
    The 5th navigation point didn’t have a link. I just went to site settings->Navigation and created an Link for the 5th navigation point.

  28. SUBRAMANYAM permalink

    Thank you for Nice Article :)

  29. I can’t download images

  30. Troy permalink

    Hi,

    How would one center the top navbar and all the items?

    Regards

    Troy

Trackbacks & Pingbacks

  1. Customizing SharePoint 2010 global navigation with Css and jQuery – Part III « Me & My SharePoint Designer
  2. Customize SharePoint Top Navigation Bar | Sharepoint Sriram
  3. Customizing the global navigation with Css and jQuery in SharePoint 2010 | Code It Simple

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

%d bloggers like this: