Overlapping Windows

I’m in danger of becoming tab-fanatic. It’s not my fault, really. All the stuff presented here, either as Sparks or hidden away as casual posts are the fruit or consequence of my day job. The curse of working the job you love is that you don’t leave it in the office. I encounter the problem and instead of working on it for few days, I take it home and finish it up in the wee hours.

And for some reason, I often encounter tabs. Tabs are self-contained and can easily be extracted from the layout where they are used. As such, they make perfect post-topic.

It’s hard to do something new in tabs domain. I thought that too when few months ago (yes, that’s how much it took me to write this) I looked for tabs that overlap each other. You see, all the various tab techniques around the Net, no matter how graphically different they are, share one common attribute. The linked parts of the tabs do not overlap, like the following well-known examples illustrate.

The area you hover will change only part of the screen occupied by li and/or a. It does not change anything outside that block. And I need to implement just such design.

Markup

The markup basis is usual li/a combination. However, with just those two elements, I couldn’t find a way to implement this design, and still keep it flexible. It is possible with generated content and :after selector, but I needed this to work in all current browsers, as it was going to be used on live web site for the client.

The problematic part is how to cover the hanging part, which goes over the neighboring tab. To do that, additional element is needed.

<ul>
<li><a href="#"> Tab item <span></span></a></li>
</ul>

You’ll see its use shortly.

CSS styling

I don’t want to go into details here, as tabs styling using Sliding Doors technique is a must for every web designer. The new stuff here is the additional span. Its parent element, a, will be relatively positioned, and span will be positioned absolutely, just outside of lower right corner of the link’s block.

#tabs a:hover, #tabs li.current a {
	position: relative;
	z-index: 1;
}

#tabs a:hover {
	z-index: 10;
}

#tabs a span {
	display: none;
}

#tabs li.current a span, #tabs a:hover span {
	background: url(images/overlap.png) no-repeat center;
	width: 23px;
	height: 23px;
	position: absolute;
	right: -23px;
	bottom: 0;
	display: block;
}

This was tested and it works in IE Win, IE Mac, Firefox, Safari 1.2, Opera 7.5, Omniweb 5.0. The working example can be seen here, and it is linked in the Sparks area, here on my site.

Possible problems

You need to be careful not to cover the text when you overlap tabs. Also, the active area of the current tab is extended to the overlapping part, so if that area is large, the next item will be harder to select.

Name

When I thought how to name these tabs, my eyes fell on Sliding Doors name. That’s a good, memorable name. And since the name is an important part, I decided to call this Overlapping Windows. :)