Create a slick tabbed content area using css & jquery

GFX9.COM share Create a slick tabbed content area using css & jquery, you can download now.



One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we're going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we'll achieve the same thing using the jQuery library.


Step 1

First things first, we need something that looks awesome. So a quick trip to Photoshop and voila we have a nice mockup of what our tabbed component should look like. It's pretty straight forward with a few extra gradients to make it nettuts awesome. You can grab the Photoshop PSD file for this image if you want to take a closer look, but it's pretty simple and we can build it off the flat JPG really.


Step 2

The first thing to do when building of course is to get a rough idea how you are going to do it. This gets easier the more things you've developed. Looking at this image I would say the best thing to do is:

  1. Have a container
    which we'll place everything inside of. That way if we needed to position our box or drop it into a sidebar, we can just grab everything wrapped in the
    and copy+paste it somewhere.
  2. Then we'll have the heading area, probably with a tag
  3. Then below that we'll have a second
    tag which will hold the tabs and content. This is the dark grey box in the image.
  4. Then inside there we'll use an unordered list

SO to summarize, it'll be something like this:

Heading

  • Tab
  • Tab
  • Tab
Content for Tab 1
Content for Tab 2
Content for Tab 3

Don't worry if looking at that image doesn't immediately make you think of that structure. Sometimes you just need to do things by trial and error. In my case I've made these little tabbed things a few times and I know that this is a nice simple way of making them.

Also it's nice to think about the structure like this before you have lots of class names and ids and content because it can get hard to see the forest from the trees later on. Especially when you add the content for all the different tabs.

So now that we have a picture in mind of how to build our structure, let's get to it!


Step 3

Now if you've followed my tutorials on PSDTUTS you'll know that I love a good gradient background. So before we even start with the tabbed structure, let's get ourselves a nice background!

Open up Photoshop, create a 1000px x 1000px document and draw a nice (subtle) radial gradient like the one shown below. Note that I've drawn out from the centre/top and made sure that the gradient is finished by the time I get to the edge of the document. That means I can set the background color in HTML to be the darker colour and if someone stretches their browser window it'll be seamless.


Step 4

So create a new directory for the project, then create a second directory inside there called images and save that image inside as background.jpg. When saving use File > Save for Web and Devices and select JPG with a quality setting of about 70. That comes out to a file size of 16kb which is not too bad. There used to be a time where you really had to scrimp and save, but now you just want to make sure you're not being stupidly wasteful with your file sizes.

Now we create a HTML document and write in some code:




	Tabbed Structure - Regular
	




So that will be the base of our HTML. Now we'll create the style.css document and write in the following:

body {
	background-image:url(images/background.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:40px;
}

A couple of things to note here:

  1. It's possible to write this same CSS using shorthand and reduce the number of lines used, but it's much clearer this way and better for tutorial writing!
  2. We have a background image (the gradient) and we've set it to no-repeat, because we only want it to appear once, it's centered and finally the background color (#657077) is the darker colour.
  3. I've added a margin of 40px. This is just for positioning my stuff later on so that it looks nice.

You can see the resulting HTML document here. Note that if you resize your window it's a nice seamless graduated background. Wunderbar!


Step 5

Next we add our structure to the page so that we can begin styling it.




	Tabbed Structure - Regular
	




Browse Site Select a Tab

Content for Tab 1
Content for Tab 2
Content for Tab 3

So as you can see I've basically used the same structure I mentioned in Step 2. I've added some ids and classes and some actual content. Here's the reasoning behind what I've done:

  1. For the heading, I've placed the subtext "Select a Tab" in a element. This lets me use the

    element for overall positioning and the element to restyle and position the subtext.

  2. The container
    has an id="tabbed_box_1" and a class="tabbed_box". I've done this because we might reuse this code multiple times on the same page. If we did that we could use the id's to position each one in different places. But we'd still have the class to do the styling. Whereas if we'd use the id for styling, we'd end up having to define the same styles again and again for different id's.
  3. I've given the links and content areas id's because we need to use Javascript to manipulate them later.
  4. Finally I've given the
      element a class name. Actually we could style it without a class just by styling .tabbed_area ul { } but this could get confused with future
        's we put inside the content area. So it's better for it to have a class name for us to refer to.

OK so without styles it doesn't really look like much.... yet!


Step 6

Now with styling up elements, I think it's best to work from the outside element in. So we'll start with this element -

- which we'll use to position the box nicely in the center of our document using this code:


#tabbed_box {
	margin: 0px auto 0px auto;
	width:300px;
}

Step 7

Now we'll do the heading area. We can style the heading like this:


.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

A few things to note here:

  1. Instead of just defining styles for h4, I've defined for .tabbed_box h4. This is important in a larger HTML document because you might have another h4 style somewhere else. So you want to make sure you don't overlap or cause future overlap problems.
  2. You'll notice I've also adjusted the bottom margin on the h4 to 10px. This is so that the spacing looks right. It's important to know that many elements have default values. For example a h4 already has a bottom margin, and it's larger than we'd want. So if we didn't set this ourselves it would appear with a larger margin. Some people use special stylesheets that reset all these default values, but I've gotten used to resetting them individually when I need to.
  3. You'll see that I've also used the text-transform attribute to make the small text all capitals. We could of course have just written it in caps, but I just like doing it this way!
  4. Also you'll notice in the small definition, I've given it a position:relative definition, this is so that I can adjust where it appears, moving it up 4px to the top and 6px to the right.
  5. Finally when styling the h4 element I gave it a negative letter spacing, but that means the small element gets the same negative letter spacing too which we don't want. So I have to define it again as 0px there. This is thanks to the fact that styles cascade down - hence the name Cascading Style Sheets. Often times you'll notice something looks weird on your page and it will be because the element has inherited some style you totally forgot about. When I first did this bit of styling I stared at the small bit for ages trying to figure out why it looked so bunched up, until I remembered!

Step 8

Next we'll give our inner

a bit of styling with this code:


.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;	
}

This just gives it a bit of definition and spaces the interior elements away from the sides. You can see where we're up to in the image below.

By working from the outside in, we've given our element a bit of shape and it's a lot easier to see how it's going to wind up looking. Also often you will have constraints coming from the outside in, for example the box might need to fit into a column of certain width. Finally it's also a good idea to go outside in, because then any style inheritance is clear. For example if you went the other way and did the interior elements first, later styles might affect those interior elements and you'd need to go back and readjust anyway.


Step 9

Now we get to the good stuff - the tabs! If we add this little piece of CSS we'll go a long way to making the tabs look more like tabs:


ul.tabs {
	margin:0px; padding:0px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}

This code says that the

Similar content