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:
- Introduction and How to customize the global navigation with CSS – Part I (previous post)
- How to customize the global navigation with CSS and how to extend it with jQuery, in this example animating the menu. (this post)
- 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:
- Include a reference in your custom master to latest jQuery
- Include a reference in your custom master to a custom CSS:
- Include the jQuery into the head section of the master page:
- 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:
- Include a reference in your custom master to latest jQuery
- Include a reference in your custom master to jQuery UI (effects.core)
- Include a reference in your custom master to a custom CSS:
- Include the jQuery into the head section of the master page:
- 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.
Me & My SharePoint [FrontEnd] 
Thanks for nice article 😛
Thanks Christian, good post !!
Great article! Can’t wait till next one 🙂 It realy helped me a lot in understanding the basic concepts.
@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
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!
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.
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
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
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.
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
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
Fantastic! You’ve opened a lot of doors for me. I’ve officially achieved junior rock star status in my company.
Genial post!!
This is great but the background gradient does not seem to rending in IE9.
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
I did some playing around and have the ms-filter working now. This is a great resource Christian!
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
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.
Great article Christian as usual. Thank you very much for posting.
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.
Christian
how to change the left navigation panel bakcground color…? (on Quick Launch)
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.
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
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
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
good article. Saved my time, Thanks
Hi Christian Stahl, YOU ROCKS!
Abdiel, here from accenture singapore! i learned a lot from your blogs keep on posting!
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?
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.
As you see in the picture the 5th navigation point has background. How can I fix it?
Thanks for your help
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.
Thank you for Nice Article 🙂
I can’t download images
Hi,
How would one center the top navbar and all the items?
Regards
Troy
Hi, excellent article. I just have one question/issue. When I implement the tabbed animated navigation described above. I noticed that if I view the page at a really low resolution or zoom into the page, The tabs do not wrap around to the next line like they do out of the box. They just disappear from view. How can I fix this?
Hi,
I am trying to design a global navigation with 4 levels. I need flyouts for the first three levels and the last level items must be expanded below their respective level 3 items.
I tried the below code, but for some reason the level 4 items appear as flyouts too. Please help me understand what I am missing. Thanks in advance.
<SharePoint:AspMenu
ID="TopNavigationMenuV4"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="”
UseSimpleRendering=”true”
UseSeparateCss=”false”
Orientation=”Horizontal”
StaticDisplayLevels=”2″
MaximumDynamicDisplayLevels=”3″
SkipLinkText=””
CssClass=”s4-tn” Width=”287px”/>
and the following styling:
.s4-tn
{
padding:0px;
margin:0px;
font-family:Calibri;
font-size: 11pt !important;
padding-left: 10px;
}
.s4-tn li.static > .menu-item
{
color:#FFFFFF;
border:1px solid #93c2ec;
padding: 4px 10px;
line-height: 20px;
height: 20px;
background:(“/_layouts/Images/selbg.png”) repeat-x left top;
background-color:#9C3633;
}
.s4-tn li.static > a:hover
{
background: url(“/_layouts/Images/selb.png”) repeat-x left top;
background-color:#E4B3B2;
color:#FFFFFF;
text-decoration:none;
color:#9C3633;
font-weight:bold;
}
.s4-toplinks .s4-tn a.selected
{
background: url(“/_layouts/Images/selb.png”) repeat-x left top;
background-color:#9C3633;
color:#FFFFFF;
text-decoration:none;
border:1px transparent solid;
padding-right: 10px;
padding-left:10px;
margin:0px;
}
.s4-tn li.dynamic > .menu-item{
padding:10px 20px 10px 20px;
}
.s4-tn li.dynamic > a{
font-weight:normal;
color:#9C3633;
background-color:#E4B3B2;
}
.s4-tn li.dynamic > a:hover{
font-weight:bold;
background-color:#F2DCDB;
color:#9C3633;
}
.s4-tn ul li a {
color:gray;
}
Hello guys, I’ve updated the link now to the tab images