3D Tabs with CSS2 - The Code

(Page 3 of 5 )

The Code

For the most part, I'm going to use the same code I did for the CSS tabs. I will only make note of where the changes are. If you need an explanation of anything not noted, it's most likely in the previous article.

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

<div id="everything">

So this time I'm wrapping everything in one div, appropriately named 'everything'. This is so that I can set it to the same width as the image we created, and all the child nodes to inherit the width, without having to set them individually.

<div id="navTabs">

<%
dim theClass, thisPage

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

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

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

Response.Write("<img src=""" & theClass & "_l.png"" />")

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

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

Response.Write("<img src=""" & theClass & "_r.png"" /></div>" & vbCrLf)

next
%>

This time you'll notice a couple extra items. I inserted the images into each tab, on the left and right. I also added in two divs below. One is for the bottom corners, and the actionPanel is the main panel, where we'll tile the center slice, and where you'll put all the elements and functional pieces of the page.

</div>
<div id="actionPanel">stuff to do</div>
<div id="btm"></div>
</div>

Next: The Style >>
 

More Style Sheets Articles
More By Justin Cook

Comments On: 3D Tabs with CSS2

· I don't mean to be too critical, but what on Earth do you mean that it has been...    · Is there a working example of this?On page 1 of the article (at...    · completely agree! If you are going to write such articles (especially on css), then...    · not testing in non-ie browsers? shame on you. you shouldnt call it an article if you...    · Hi all,Thanks to a very knowledgable person from another forum (i won't name...    · As for doing this without javascript, you can remove the onClick for the div and put...    · This asp code doesn't work if your on a page that is not included in the array. This...    · i should of read the whole article...sorry    · First of all, stop calling the author "lazy". The guy has written 12 articles for...    · The real funny thing is this.... These people are all calling the author lazy, but...   >>> Post your comment now!