SimpleBits ~ Mini-Tab Shapes

10:53 PM

And you thought that there was nothing more to be said about CSS tabs… In exploring navigation ideas for a new project, I wanted a mini-tab effect, but something different than the default, border-bottom that the method utilizes.

The nice thing about the original mini-tabs is that the border will always be the exact width of the text above it — but you are stuck with a square tab. I started thinking of ways that I could simplistically style the tab portion differently. So I came up with Mini-Tab Shapes. Each style uses a single, small GIF for hovering and active tabs. The answer to my width dillemma (the fact that the width would change depending on the length of the word) was to make the tab image small enough and then center it using:

background: url(tab_rounded.gif) no-repeat bottom center;

Now, if your navigation only contains a few items, you could easily create the tab graphics to fit the entire width of the word — however if you’d like the text to be resizable, the effect would break. The possibilities for shapes go far beyond the four examples, and I’m sure would work well in a vertical list as well. Update: They do.

Tested in Mac: Safari, Camino, IE5; PC: IE5.0, IE5.5, IE6, Opera7

Add your own

54 Comments

Pierce → www.piercegleeson.com

I like this a lot. The pyramid is nice. I’d like a row of pyramids across the bottom. But I suppose it would be impossible to stop them getting cut off in the wrong area.
Pointing from the left in a vertical list would look good also. Very good. hmmm…

Anne van Kesteren → annevankesteren.nl/

I like it!

In Mozilla (1.5b) it works fine too, while it’s not in your list, I think you already knew that…

Maybe it is possible to enlarge the clickable area?

afrael → afrael.loquesea.org

Excellent !!!

Great Work Dan…

Ben Scofield

You can enlarge the clickable area - just make some changes to the a:link and a:visited rule -

#navPyra a:link, #navPyra a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
text-decoration: none;
color: #708491;
display : block;
border-bottom : 1px solid #9FB1BC;
padding : 0 12px 6px 12px;
}

We set the display mode to block, give a bottom border to the a element (same color as the border on the ul), change the margin to padding, and tweak the bottom padding value a bit. Not sure why the bottom border is necessary, but without it the expanded clickable area doesn’t happen. I’m guessing it somehow tells the browser that you’re serious about the a tag being a block element.

Dan → www.simplebits.com

Pierce - You’re right in that you’re limited to the width of your shortest word, but I could see a row of pyramids working quite nicely.

Ben (and Anne) - good idea on changing margin to padding to increase the clickable area. But even simpler than adding a border and display: block is:

#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

Which was basically just changing to padding and removing the redundant padding-bottom: 6px; rule I had in the :hover for some reason.

I’ve just changed the live example, but could only test Mac browsers for now. I have a feeling the others should behave exactly the same.

Adam Polselli → www.adampolselli.com

Wow, those look great Dan! Keep the creative juices flowing. :)

adn → www.throatwobblermangrove.com

I worked on a similar trick some time ago to create a CSS based rollover effect at

http://www.axn.es

See the little white moving arrows? That’s the % positioned background image.

Mike

Also, it works fine in Mozilla 1.4/PC and Netscape 7.1/PC (although dead).

Ben Scofield

Dan -
The new version still doesn’t give the right results in IE6/Win (surprise, surprise). If you mouse up to a link from below, you’ll only see the rollover when you hit the actual text. That’s why I added the bottom border… Dunno why that’s the case, but it’s darn frustrating.

Dan → www.simplebits.com

Ben - Thanks for checking it. I suppose it’s not horrible that only the text is hot, but I’ll play around more with your border-bottom addition. Cheers.

Paul Scrivens → www.itnextgen.net/pseudo/

Dan - Way to keep from remaining stagnant and upping the game another notch.

Paul Watson → www.typepad.com/

The pyramids were not built by the Egyptians. Dan built them with CSS in 7 days.

Nice work and it will be even better with the extra hotspot space Ben suggested.

chris → www.onlinefame.com/

I actually decided to use that “pyramid tab” idea just yesterday. And today I find the code already laid out for me! Thanks.

Sunny → www.thesunreport.org/

Dan - You said, “…would work well in a vertical list.”

Here they are. It works in Mozilla/Firebird and IE6. I would love to know if it is fine in other browsers. It is nothing special really. Just some minute changes.

And, thanks for these css pearls of yours Dan.

Dan → www.simplebits.com

Thanks for all the positive comments!

Sunny - wow, fantastic! Great work - they really do work well horizontally as well.