Creating Overlapping Tabs in Flex (Graphically)
Recently I was presented with the challenge of creating overlapping Tabs and when clicked, the selected Tab should come to the foreground. No problem I thought. I’ll just set the horizontalGap of the TabBar to a negative value to get the overlap and, um, wait a second. How do I get the selected Tab to come to the foreground when it’s clicked? It doesn’t do that by default. A selected Tab stays at it’s itnitially rendered depth.
I tackled this challenge graphically by modifying my Tab skins by slicing them up like and putting the “overlapped” portion of the Tab with part of the Tab skin next to it. This is pretty similar tactics to creating overlapping tabs fot HTML sites using CSS. This is how my skin graphics looked:
Which gave me a TabBar with Tabs that looked like this:
I then ended up adding some gradients to smooth out the juncture of where one Tab skin met the next to prevent any hard edges. Subtle stuff, but it makes a difference. Adding those gradients gave me a TabBar with Tabs that looked like this:
The final step was pointing to my CSS file for the styling of the TabBar and Tabs. With the styling in place, this technique creates the illusion of overlapping Tabs in a TabBar.
View Sample and with Source (FLA file included)
Of course there are downsides to this technique. The most flexible solution would be tweaking the TabBar to bring the selected child/tab to the foreground. Doing so would mean there’d be no need to mess with slicing up images and all you’d have to do is set the horizontalGap on a TabBar to a negative value like I initially tried to do. Hopefully there wasn’t an allowTabOverlap property, or something, I missed.
October 23rd, 2007 at 5:47 am
..forget to say this solution makes too many problems f.e.
if u need every tab to be different color(like i do need) this is not possible with this approach .. thanks anyway for good work
February 27th, 2008 at 5:07 am
[...] stacked left-to-right on top of each other. There’s a solution out there that relies on clever skinning techniques, but this has some flexibility [...]