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