jQuery Enhanced CSS Navigation

jQuery Enhanced CSS Navigation

In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The current version I have created has fixed width tabs and the navigation also must be fixed width. In the future I will look into releasing a fluid version. The basic effect we are creating is when you hover over a tab it raises up using jQuery. The navigation also includes an image on click, so in total 3 images for each colour of tab need to be created. As usual you will need the jQuery framework for this tutorial.

You can view the navigation we will be creating at the following demo link.

Creating the images

For this tutorial I created 3 different colour types as an example. Each tab consists of three states, the standard default look, hover state and active state when it is clicked. I went for a light highlight effect on hover (white overlay) and a dark inset for active (black inner glow). You can view the blue image set I created below as an example but feel free to create your own. An important thing to note when creating the image – the tabs will raise up therefore you must create the images the size when fully raised up as opposed to the default visible area. In this example the images raise up by 5px so to start with 5px of the tabs are hidden.

Coding the basics

The start of the navigation is very simple. We obviously have an unordered list for the links and must give each link a colour class to determine which images to use. This is held within a div of id “tabs”, this is because we will be positioning the shadow image absolutely to cover up the bottom of the tabs to start with.

Templates
Tutorials
Resources

#tabs{
	height:43px;
	position:relative;
}
#tabs ul{
	padding:0;
	margin:0;
	list-style:none;
}
#tabs ul li{
	height:43px;
	width:114px;
	display:block;
	margin-right:2px;
	float:left;
	text-align:center;
}
#tabs ul li a{
	font-size:14px;
	color:white;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	height:34px;
	padding-top:9px;
	width:114px;
	display:block;
}
#tabs ul li a.blue{
	background:url(blue.jpg) bottom left no-repeat;
	text-shadow:1px 1px #000b57;
}
#tabs ul li a.blue:hover{
	background:url(blue.jpg) center left no-repeat;
}
#tabs ul li a.blue:active{
	background:url(blue.jpg) top left no-repeat;
}
#tabs ul li a.red{
	background:url(red.jpg) bottom left no-repeat;
	text-shadow:1px 1px #620405;
}
#tabs ul li a.red:hover{
	background:url(red.jpg) center left no-repeat;
}
#tabs ul li a.red:active{
	background:url(red.jpg) top left no-repeat;
}
#tabs ul li a.green{
	background:url(green.jpg) bottom left no-repeat;
	text-shadow:1px 1px #274400;
}
#tabs ul li a.green:hover{
	background:url(green.jpg) center left no-repeat;
}
#tabs ul li a.green:active{
	background:url(green.jpg) top left no-repeat;
}

There should be nothing particularly difficult to understand in the above code. We have a basic navigation with fixed width and height links floated so they are in-line horizontally. They are held within a div with position:relative so the shadow can later be placed over the top. Each colour of tab has a separate class which sets the default, hover and active states. It also adds a text shadow appropriate for the colour of background. The following codes should give you a navigation like in the following link. Also note the text is positioned slightly towards the upper area of the tab. When the bottom of the tab is hidden the text will look more centrally positioned.

Hiding the bottom of the tabs

In this example I went for a shadow effect to hide the bottom 5px of the tabs. This could easily be a solid colour or any image of your choice. The way to get the image to display over the top of the tabs is to position it absolutely. This has the drawback that the positioned absolutely div must have a fixed width. To get the shadow div to display within the tabs div we made the tabs div position relative. The only other slightly odd thing is we want the shadow to overlap only by 5px at the bottom. To do this we just minus 5 from the height of the shadow image (22px) and make that a negative bottom attribute in CSS. So for this example we have the shadow div positioned at bottom:-17px.

Templates
Tutorials
Resources

#shadow{
	position:absolute;
	bottom:-17px;
	left:0;
	width:346px;
	background:url(shadow.jpg) repeat-x bottom;
	height:22px;
}

You should now have the following navigation.

Animating the links

First off call the jQuery framework in the head section of the page. Also create a new javascript file called general.js and link to that as well. We will use general.js to add our necessary jQuery code.

Next we have to work out a way to raise the images using jQuery. At the moment this is pretty difficult due to the way we have set up. It would be easy to push the links down but not up. To make this easier we increase the height of the tabs div by 5px. This will mean the shadow image doesn’t overlap the tabs. The easy way to make the shadow therefore overlap is to lower the links. This is very simple, just add margin-top:5px to #tabs ul li a. This way to raise the links we simply just have to reduce the margin-top to 0px. We can use the animate attribute in jQuery to accomplish this. The necessary jQuery code is as follows (general.js).

$(document).ready(function() {
	$('#tabs ul li a').hover(function() { //mouse in
		$(this).animate({ marginTop: '0px' }, 300);
	}, function() { //mouse out
		$(this).animate({ marginTop: "5px" }, 300);
	});
});

First we make sure the page is ready, then we add a hover function. When the #tabs ul li a is hovered over the Margin is animated to 0px in 0.3 seconds. When the mouse leaves the opposite is carried out. You should now have a fully functioning navigation like in the original demo.

Conclusion

This tutorial is a mere example of the animated tabbed navigation using jquery. There are a few ways to improve, for example, making the tabs fluid (pretty simple). Instead of using an image to cover up the tabs (my preference) you can actually reduce the height of tabs div back to 43px and make it overflow:hidden. This means when you add the margin-top:5px the bottom 5px would be outside the tabs div and therefore hidden. You can see this example at the following link. This removes the need for any position absolute and also allows you to make the whole navigation fluid without any fixed widths at all.

I am taking requests on freebie templates, tutorials etc. So if you want to make a request please send a message on twitter.

Related CSS Tutorials

Comments