Fading Navigation Text with CSS & jQuery

2 Aug 2009 View Demo

It’s been a while since the last post, mainly because I haven’t had anything to post about. However, recently, I wanted to achieve a fading effect when I hovered on the navigation elements of a website I was making. I could have just used jQuery to animate the color of the text using the color plugin and that would be the end of it. Unfortunately, the designer used a non-standard font for the navigation, so I needed an alternative approach.

So I remembered reading an article by Jonathon Snook and knew that I could do something similar to achieve this effect. So my approach was to use an image for each navigation element, which had the text cut out of it.

Step 1: The Markup

Illustration of how this technique works As with any navigation menu, I have started off with a simple list. Each list item needs a link inside it, and each of these links needs a span inside it. The span is required so that we can add the transparent cut-out text image on-top of the gradient background colour. Additionally, I have given each list item an id, as we need these hooks for the CSS and jQuery animation.

<ol>
  <li id="home">home</li>
  <li id="about">about</li>
  <li id="blog">blog</li>
  <li id="contact">contact</li>
</ol>

Step 2: The CSS

The CSS is actually straight forward: firstly, we add the gradient background image to the link, and then add the cut-out text image to the span nested inside of it. You will notice I have used the iepngfix hack to get the transparencies working in IE6 (Although without further workarounds, I believe the link won’t be clickable…meh!). I have included a hover state for these links, so that without Javascript, the color will still change, you just won’t get the fading animation.

#navigation ol li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	color: #FFF;
	width: 141px;
	float: left;
	padding: 0;
	height: 54px;
}
#navigation ol li a {
	text-decoration: none;
	display: block;
	width: 100%;
	height: 54px;
	padding: 0;
	margin: 0;
	color: #FFF;
	text-indent: -9999em;
	background-color: #FFF;
	background-position: 0 0;
	background-repeat: repeat-x;
	background-image: url('../images/nav_gradient.png');
}
#navigation ol li a:hover {
	background-position: 0 -162px;
}
#navigation ol li a span {
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	height: 54px;
	width: 100%;
	behavior: url('../js/iepngfix.htc');
}
#navigation ol li#home a span {
	background-image: url('../images/home_tab.png');
}
#navigation ol li#about a span {
	background-image: url('../images/about_tab.png');
}
#navigation ol li#blog a span {
	background-image: url('../images/blog_tab.png');
}
#navigation ol li#contact a span {
	background-image: url('../images/contact_tab.png');
	width: 141px;
}

Step 3: The jQuery Animation

This is incredibly simple: all you need to do is define a hover function for each link, and then animate the background position when the mouse is moved over and out of the link. Note: In order to get background animations to work, you will need to download and include the background position plugin.

$(function() {
	$('#navigation ol li a')
	.css({backgroundPosition: '0 0'})
	.hover(
		function () {
			$(this).stop().animate(
				{backgroundPosition: '(0 -162px)'},
				{duration: 500}
			);
		},
		function () {
			$(this).stop().animate(
				{backgroundPosition: '(0 0)'},
				{duration: 400}
			);
		}
	);
});

Screenshot of the Fading Navigation Text with CSS & jQuery demo

Tagged as

Subscribe to the RSS feed

pmbennett.net