I highly doubt that I need to convince you of the benefits of implementing tabs as a navigation mechanism. If you are unconvinced, or haven't read this [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] , please do that now. But if you feel you're ready to move right into the fancy-schmancy 3D tab creation, by all means read on!
I am using FireWorks for the image creation and slicing, but I can't force you to do the same. If you have Photoshop, go ahead and use it. If you don't have a decent image manipulation tool, I recommend the GIMP ( [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] ), it's Free Software, and it rocks. But because I initially did this using FireWorks, I'm just going to outline the steps I've already taken. Call me lazy...
My previous article described in detail how to create some wonderful tabs, and in the end they looked like this:
And what we'll have when we'll have this:
Much nicer, wouldn't you agree? Let's get into the first step then -- the image creation and slicing.
The Images
The Images
We're going to do this all with one image then slice it up. So let's give ourselves plenty of space to work with. Create a new image with a width of at least 900px. This will be the end width of the entire work space on the web page as well, so take into consideration how many tabs you'll have, and how much space you'll need.
Step 1 – Create the Rounded Rectangles
So now we have an empty workspace. Grab the rounded rectangle tool. If you don't see it, click and hold the rectangle tool, and it will appear as an option to switch to.
Draw a big (preferrably white) rounded rectangle, the full width of the image. It doesn't matter too much the height of it, as you'll be tiling the center portion to stretch to whatever length the page needs. Just leave a little space at the top for the two different tabs. Duplicate this layer into another, and hide that layer. (This step is important, and we'll come back to it later.)
On the same layer, draw a small rounded rectangle that runs into the top of the big one. This is the first tab, the 'on' or active tab. Group these two rectangles with 'Ctrl + g'.
Now create another layer, behind the first, and draw one more rounded rectangle. This one should be approximately the same size as the first, but a few pixels higher. Do not group this one.
You should now have something that looks like the following:
Step 2 – The 3-Dimensionalization
Now we want to make them look like buttons or protruted tabs. To do this we can use the Eye-Candy 'bevel boss' filter that comes with FireWorks. Bevel the grouped rectangles first. Then unhide that duplicate layer you created, bevel it so it's the same as the big rectangle, and then re-hide it. Then bevel that other rectangle, the 'off' tab that's sitting behind the group, and do it slightly darker than the others.
Now the image should look like this:
Step 3 – Slicing and Dicing
Now we need to create the slices to export the pieces we need. To create slices, we use the selection tool, select the area we want, right-click and select 'Insert Slice”.
So let's get the three general slices for the main panel (top, middle, bottom), then worry about the tabs. This is where that second, hidden layer comes in handy. Unhide it, and hide the layer with the tabs. Create three slices, one with the bottom corners, one thin one of the center, and one that capture the top corners and empty space. Your image should look like this:
Export each of these slices with their respective names: top, middle, and bottom.
Now let's do the tabs. Re-hide this layer, and we can forget about it now, it won't be used further. Unhide the tab layer. Slice it up so you get a left, center, and right slice of each button. The reason we don't just make each tab one big slice is so that we can tile the center piece, and grow the tab to whatever width is necessary. It should look like this:
Export each slice with the following names, from left to right: on_l, on_m, on_r, off_l, off_m, off_r. As you can see, I use the state of the tab (on/off), followed by the postion (left, middle, right). You can use whatever naming scheme works for you, just make sure you update the code and the styles.
And that's it. We've created, sliced, and exported all the images we need. Now let's get into the code.
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.
[PHP]<%
dim arTabs( 5 )
arTabs( 0 ) = "home"
arTabs( 1 ) = "events"
arTabs( 2 ) = "news"
arTabs( 3 ) = "photos"
arTabs( 4 ) = "users"
arTabs( 5 ) = "admin"
%>
<div id="everything">[/PHP] 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.
[PHP]<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"" /> ")
Response.Write( replace( arTabs(i), "_", " " ) & "</div>" )
Response.Write("<img src=""" & theClass & "_r.png"" /></div>" & vbCrLf)
next
%> [/PHP]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.
[PHP]</div>
<div id="actionPanel">stuff to do</div>
<div id="btm"></div>
</div>[/PHP]The Style
[PHP]#everything {
padding: 0px;
margin: 4px;
height: 100%;
min-height: 800px;
width: 900px;
}[/PHP] So I set this to the width of the image I created. Then each child node is set to 100% of this width, though you could also use the 'inherit' attribute.
[PHP]#navTabs {
padding: 0px 0px 0px 15px;
margin: 0px;
width: 100%;
background: url("/cms/images/tabs/top.png") no-repeat top;
height: 45px;
vertical-align: top;
}[/PHP] You'll notice this time it has a background, instead of just a line. The tab images will layer over this, the off images appearing behind, and the on images appear to meld right into it.
[PHP].tabon, .taboff {
height: 45px;
cursor: pointer;
cursor: hand;
display: inline;
overflow: hidden;
vertical-align: top;
}
.tabOn {
background-image: url("/cms/images/tabs/on_m.png");
font-weight: bold;
}
.taboff {
background-image: url("/cms/images/tabs/off_m.png");
color: #666666;
}[/PHP] Here I've set the background image to be the middle slice. This will repeat to the width of the div.
[PHP].tabItem {
vertical-align:top;
height: 45px;
display:inline;
font-size: 11px;
margin: 10px 0px 0px 0px;
}
#actionPanel {
width: 100%;
height: 70%;
padding: 10px;
background: url("mid.png");
}
#btm {
height: 16px;
background: url("bottom.png");
}[/PHP] And of course, I set the background of each of the other two sections.
The Conclusion
Now there are two important things I feel I must mention. The first is that this has only been tested in Internet Explorer (I know, slap my wrists). It may need a little tweaking of the CSS to get it to display perfectly in Mozilla or Opera. Feel free to post any findings you make in this regard.
You've also probably noted that by doing things this way -- creating one image for the bottom, middle, and top –- we are limiting ourselves to the width of the image. This doesn't work well if you have more tabs than can fit in that width, or just lot's of lateral content. For these situations, you'd want to slice it up even more, and created an expandable center area, and image slices for all corners and edges that can adjust accordingly.
Other than that, you should be able to make great use of (and extend) this structure in your web application. Feel free to suggest any improvements that you've made!
All the code:
[PHP]<style>
#everything {
padding: 0px;
margin: 4px;
height: 100%;
min-height: 800px;
width: 900px;
}
#navTabs {
padding: 0px 0px 0px 15px;
margin: 0px;
width: 100%;
background: url("top.png") no-repeat top;
height: 45px;
vertical-align: top;
}
.tabon, .taboff {
height: 45px;
cursor: pointer;
cursor: hand;
display: inline;
overflow: hidden;
vertical-align: top;
}
.tabOn {
background-image: url("on_m.png");
font-weight: bold;
}
.taboff {
background-image: url("off_m.png");
color: #666666;
}
.tabItem {
vertical-align:top;
height: 45px;
display:inline;
font-size: 11px;
margin: 10px 0px 0px 0px;
}
#actionPanel {
width: 100%;
height: 70%;
padding: 10px;
background: url("mid.png");
}
#btm {
height: 16px;
background: url("bottom.png");
}
</style>
<%
dim arTabs( 5 )
arTabs( 0 ) = "home"
arTabs( 1 ) = "events"
arTabs( 2 ) = "news"
arTabs( 3 ) = "photos"
arTabs( 4 ) = "users"
arTabs( 5 ) = "admin"
%>
<div id="everything">
<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"" /> ")
Response.Write( replace( arTabs(i), "_", " " ) & "</div>" )
Response.Write("<img src=""" & theClass & "_r.png"" /></div>" & vbCrLf)
next
%>
</div>[/PHP] By MR Cook
