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.

The first thing to be aware of is the images used in this tutorial. From the full PSD we create a 1px wide image for the background and a 2px by 15px image for the divider. These are the only two images which will be used in the tutorial. The below image highlights the two areas used for these images:

Creating the images

The Code

Due to the simplistic nature of this tutorial I will simply provide the full code then highlight some sections in the paragraph below. If you need more detailed explanation please watch the screencast.

HTML

	
Home
    
Tutorials
    
Screencast
    
Videos

CSS

@charset "utf-8";
/* CSS Document */

body{
	background:#333;
	padding:50px;
}
ul{
	padding:0;
	margin:0;
	list-style:none;
	background:url(dark-bg.jpg) repeat-x top;
	height:40px;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	width:600px;
}
ul li{
	float:left;
	background:url(dark-divider.jpg) right no-repeat;
	padding-right:2px;
	position:relative;
	overflow:hidden
}
ul li a{
	font-size:16px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#ccc;
	text-decoration:none;
	padding:10px 15px 10px 15px;
	display:block;
	position:relative;
	z-index:5;
}
ul li a:hover{
	color:white;
}
ul > li:last-child{
	background:none;
}
ul > li:first-child span{
	width:75px;
   	-moz-border-radius: 0 0 0 2px;
	border-radius:  0 0 0 2px;
	-webkit-border-radius: 0 0 0 2px;
}

Some Explanation

The code should be very straight forward if you have experience with HTML and CSS. I will quickly explain a few key points. In the HTML we have a very simple unordered list (ul in CSS) which contains list items (li in CSS). Each list item holds an anchor which represents the link (a in CSS). If you then look at the CSS we have added the main background image to the unordered list and added the divider image to each list item. This is all very simple. Where you may not be so familiar is with the first-child and last-child selectors. These are very useful selector as you will soon notice. By adding the divider image to the right of every list item we would usually have an extra image shown on the last item. In order to stop this all we need to do is select this list item using last-child and set background to none. The same principle applies when adding a rounded corner to the first list item.

One other tip which you may be unaware of is the z-index property. It is used to signify the order/layering of elements. If an element has a z-index less than another it will be displayed below. This only applies to elements with a position property, for example absolute or relative. In our example we use the z-index to make sure the anchor is always on top, therefore making the links click-able.