Tabbed Browsing with CSS2
(Page 1 of 3 )
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!
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)
then
theClass = "on"
else
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"" /> ")
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.
next
%>
</div>
Next: The Style >>
More Style Sheets Articles
More By Justin Cook
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 17 
