x

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.

blue tabs

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.


#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.


#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.

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Poker Cards

    September 3, 2010 / No Comments

    Not really a tutorial but I developed some really simple cards. They are perfect for describing a poker hand or anything else involving cards. Check them out at the following link. Let me know if you encounter any problems or what to request anything.

    Read
  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

    Read
  • Top 7 link and text effects using javascript/css

    April 20, 2009 / 17 Comments

    In this article I will run through my favourite ways of enhancing links and text on your website using Javascript and CSS.

    Read

Comments

  1. satrya says:

    I like this.. thx

  2. Thanks a lot for sharing this. This is cool.

  3. very good tutorial

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books