Home arrow Style Sheets arrow Tabbed Browsing with CSS2

Tabbed Browsing with CSS2

So you've created one sweet web application, and you're very proud of the functionality, but the User Interface is somewhat lacking. Hey, don't worry, it happens to all of us. We are programmers after all, not UI designers! But don't despair; this tutorial will show you how to separate the pages of your application into ergonomically distinct chunks, by the use of CSS tabs. That's right, CSS, no tables involved!

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 35
July 28, 2004
  1. · Tabbed Browsing with CSS2
  2. · The Style
  3. · Conclusion and All the Code

print this article

Tabbed Browsing with CSS2
(Page 1 of 3 )

It has become a very established fact that tabs are an easy way to separate pages or different areas of a website. If done properly, they can be very aesthetically pleasing and intuitive to use. You can prevent users from ever having to ask “umm, where's the _______ feature?”, because it will very obviously be one of the tabs. And not only that, but you can transcend the stereotype of a programmer and deliver something that works AND looks good!

For the sake of this example, I'm going to assume that you have a few different pages here, and they have very basic names, such as 'news', 'photos', and 'users'. I'm going to throw them into a very basic array for simplicity sake. We will use each item of the array to display a distinct tab, to show an icon, and to provide a link. For your own use you can make this as complicated as you want. In one application that I built, I used a multidimensional array for the sake of being able to control access based on privileges, but we don't need all that for the tutorial.

The Code

OK, to start off with, let's create the array. I'm using ASP syntax for this; feel free to translate it however you wish:

dim arTabs( 5 )
arTabs( 0 ) = "home"
arTabs( 1 ) = "events"
arTabs( 2 ) = "news"
arTabs( 3 ) = "photos"
arTabs( 4 ) = "users"
arTabs( 5 ) = "admin"

Now that we have the array, here's what needs to be accomplished. We're going to have one main layer to hold all the tabs. We will not use any tables. Tables are bad. Tables are the enemy. OK, maybe that's a little extreme, but truthfully this is not what tables should be used for, so we won't use them.

We'll have one layer (div) called navTabs, and loop through the array to output each item into its own little box, which we'll style into a tab!

Here we go:

<div id="navTabs">
dim theClass, thisPage

thisPage = Request.ServerVariables("SCRIPT_NAME")
thisPage = replace( right( thisPage, len( thisPage ) - inStrRev( thisPage, "/" ) ), ".asp", "" )

This little piece is important. Working from the inside out, it first strips out the filename from after the last “/”. So if the URL is '/webapps/myapp/admin/users.asp', the resulting string is just 'user.asp'. Then we take that, and chop off the file extension, which is '.asp' in this case. The result is now just 'users', which you should recognize as one of the items in the array. That is important, as you'll see in a second.

for i = 0 to uBound( arTabs )
if thisPage = arTabs(i) or left( thisPage, len( arTabs(i) ) ) = arTabs(i)

theClass = "on"

theClass = "off"

end if

This is where the location identification takes place. It's obvious that if the current array item matches the current page, then we should set that tab item to be 'on'. However the second part of the 'if' statement might not make sense to you. It is there so that you can have multiple pages use the same tab. If I have pages that all work on users, I would want them all under the users tab. So I might create a generic users.asp, then maybe a users_password.asp, and perhaps a users_info.asp. As the first portion of the filename matches the array item, they all cause the 'users' tab to be active.

response.Write("<div class=""tab" & theClass & """ onclick=""javascript:window.location='" & arTabs(i) & ".asp'"">")

You'll notice I'm not anywhere outputting an anchor link. This is because I want the entire tab to appear as a link. So I set the onclick handler to send the user to the page, and as you'll see in the CSS, I set the cursor to a hand, to simulate a link.

Response.Write("<img src=""" & arTabs( i ) & ".gif"" align=""absmiddle"" />&nbsp;")

Response.Write( replace( arTabs(i), "_", " " ) & "</div>" & vbCrLf )

Here I've inserted an icon to enhance the usability, and then the name of the tab. The icon is just a gif with the same name as the array item, for the sake of simplicity. I didn't include any dimensions to the image, in case I want to quickly swap them down the road, or in case some of them are slightly different. Now we'll finish off the loop and I'll get into the CSS.


blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials