Screencast Video Tutorials

Welcome back to part two of the jQuery navigation tutorial. In this step we will create the jQuery effects when the links are hovered over. As usual check the screencast above for full details.

The Images

The images used in this tutorial are slightly different from those in the last. In the last we simply created JPEG images to be used for the background and dividers. For this tutorial we need the highlight/overlay images. They can’t have a background and must fade from white to completely transparent. To do this you need to copy the highlight layer you want in Photoshop to a new document and save as a PNG image. This is a very useful little tool to create some great effects. Check the video for the images being used.

The HTML

The first thing to do is open up the HTML document you created last time. All we are going to do is add an empty span and an empty em element. These will both be positioned absolutely containing a highlight image. One will be the main overlay highlight and the other will be a bar at the bottom with a highlight image in the center. The HTML should look like as follows:

	
Home
    
Tutorials
    
Screencast
    
Videos

The CSS

Next thing we need to do is style the empty elements we just created. Here is the extra CSS we need to add:

ul li span{
	position:absolute;
	width:100%;
	height:2px;
	bottom:0;right:2px;
	background:#008aff url(dark-btm-highlight.png) center no-repeat;
	z-index:3;
	opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0); 
}
ul li em{
	position:absolute;
	width:100%;
	height:34px;right:2px;
	bottom:2px;
	background:url(dark-overlay.png) repeat-x  bottom;
	z-index:4;
	opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0); 
}

A key thing to pay attention to is the opacity. We set the opacity to 0 which means as default the images are not visible. We will then use jQuery to animate this opacity to 100% (1) when the anchors are hovered over. More information is given in the screeencast at the top of the page.

The jQuery

The final thing to do is to animate the highlights created above. To do this we first set up the jQuery document and apply a function which will animate the highlight opacity.

$(document).ready(function(){
	$("ul li").hover(function(){
		$(this).find("span").animate({opacity:1},100);
		$(this).find("em").animate({opacity:1},400);
	},function (){
		$(this).find("span").animate({opacity:0},500);
		$(this).find("em").animate({opacity:0},200);
	});
});
    

The first and last line signify the standard and end of the document ready function. This means anything within this will only occur once the document has been loaded. Inside that we have a simple hover function. When a list item is hovered over we select a span which is contained within this list item. This span is then animated to an opacity of 1 over a duration of 100 milliseconds. The exact some for the em except the speed is slightly slower. We then have another function for when the list item is no longer hovered over. This animates the elements back to opacity 0 – making them invisible.

By using PNG images and two different elements we can use this effect with different color bottom bars, without a jQuery plugin and animate the two elements at different speeds. This is a nice trick to learn. You can expand it even further or try different animations. For example, you could have an overlay images which is animated to pass through the anchor from top to bottom creating a flash effect similar to those used in flash.

If you have any questions or requests please post a comment. Also remember to check out the screencast at the top of the page. Demo and download links are to the right of the screencast as usual.