Mini-Tab Shapes
A notebook entry published on August 14, 2003
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
54 Comments
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?
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.
Pierce → www.piercegleeson.com
The vertical pyramids look really great, as I thought they would.
I suppose one could change the colour scheme fairly simply…. hmm…
Jarod Lam → www.netdistortion.com
Wow. Keep up the great ideas. I love these!
dagny
TestCase: vertical list, multi-line anchor content
Success:
Mac - Safari (1.0v85), Mozilla (1.4)
Linux - Firebird (.6.1)
- a centered left bg image (as used in the vert examples shown on this site) will be rendered properly on line 1 of multiline anchor content.
Fail:
Mac - IE (5.2) - no bueno
- when the anchor content (over)flows into lines 2..n, the background image is (erroneously?) rerendered under each new line (even when no-repeat is applied to the background-image attribute). The ‘padding’ is (correctly) not applied to lines 2..n and so the background image on these lines clashes with the text.
PC - IE (6) - no bueno
- when the anchor content (over)flows into lines 2..n, the background image is (erroneously?) rendered ONCE in the center of lines 1..n, NOT once in the center of line 1 only.
ymmv.
Vuarnet → www.isopixel.net
Nice menus… I like it too…
Joshua Kaufman → unraveled.com
Dan the tab man does it again! Very nice work! *applauds*
Remi → www15.brinkster.com/soulretro2/
Nice tabs. I made use of them.
Ian → www.e-lusion.com
I just wanted to elaborate on the image itself. I created an animated gif which drops down when the mouse rolls over the link. Here is the example.
Pierce → www.piercegleeson.com
Ian - The animated gif worked for my first rollover, but for each one after that the gif wasn’t animated. It just appeared without dropping down.
I’m on IE5.5/Win
Anne van Kesteren → annevankesteren.nl/
Just a comment to improve your markup. Use the del and ins element to mark document changes ;).
Sunny → www.thesunreport.org/
I present the Other Tab. The fun just never ends!
Jeff Croft → jeffcroft.com
Ian-
Cool idea with the animated gif. Unfortantley, it doesn’t work for me in safari. not sure why (didn’t have time to get into the code), but I thought you might like to know…
Jeff
Paul
Sunny - I like the idea, but I think it looks more like a glitch than it does a hover effect. perhaps increasing the width of the white might achieve a nice effect.
Sunny → www.thesunreport.org/
Paul - I think you are right. Looks like a glitch. It will surely fail a usability test.
I will see what I can do. Seemed like a really good idea tho.
Dan → www.simplebits.com
I’ve just returned from a few days in Nantucket, where I saw tabs on the beach, in boats, on cobblestones, etc. Just kidding, I didn’t think much about CSS tabs while there — but I’m sure glad to come back to some variations on the idea. Love the animated GIF idea.
dagny - Hmm.. I’m not seeing these fail in IE/Mac 5.2 or IE/6.0 Win.
Simon
Hi Dan, thanks for the great tips!
Unfortunately, the vertical tabs don’t seem to work on IE5 PC. The text and tab image backgrounds seem to ignore the padding rule and flow on top of eachother and against the left border.
Any suggestions anyone?
Cheers,
Simon
Sunny → www.thesunreport.org/
Simon - Thanks for pointing out the bug. The vertical tabs were not tested in IE5 Win. But I will install it right away and see what is up. Until then, if possible, could you please send me a screenshot at sun10384@yahoo.com ? I will be immensely grateful.
Pierce → www.piercegleeson.com
You can’t run IE5 and IE6, or any two versions of internet explorer, on one machine.
A fact that’s been irritating me greatly over the last few days in the design of my site’s layout.
Sunny → www.thesunreport.org/
Pierce - I had no idea! That IS irritating. There is no way I am going back from IE6 to IE5!
More than ever, I will be really glad if somebody can send me a screenshot of the tabs in IE5.
Anne van Kesteren → annevankesteren.nl/
In two days I have IE5.0 in my possession. I have to do some testing myself and I think I have some time for your tabs ;).
@Dan, you should use [ins] if you update your little article ;) (I know it’s the second time).
Gilles Caron
Nice tabs variant, with a lot of good ideas from everybody…
It works OK in IE5 as an horizontal menu, but here is how it looks in IE5 as a vertical menu.
http://iquebec.ifrance.com/gillcar/files/vert.gif
The menu items text is too close of the vertical line. Too much on the left.
Gilles Caron
Here is a little test that I did. I like to have a different picture for the active and for the hover item.
I love it. (The mini-tabs idea I mean…)
eric → www.molotovgraphics.com
I’ve been trying to figure out how to redesign my site’s layout for a while, and this looks like it. I previously (legacy css changed how stuff fits) had a tables-based layout with a sidebar. thanks to this neat tabs thing, I’ve now got a much cleaner layout that has less wasted space.
Thanks, Dan! You’re a lifesaver.
Simon Griffee
Sunny,
I was about to send you an IE 5 screenshot but noticed Gilles got to it already and it shows exactly what I was seeing — thanks Gilles! Meanwhile I believed I solved the problem.
Don’t have time to explain right now (and not sure if I could!) but check out the *Hed Navigation* section of this stylesheet:
http://www.acotel.com/html/css/acotel.css
The above is work-in-progress on standards-based redesign of this site: http://www.acotel.com/html/index.php). The menu works in IE 5/6 PC, Mozillas, Safari, IE5.2 Mac.
Cheers,
Simon
Sunny → www.thesunreport.org/
Gilles - Thanks for the screenshot. Really appreciate your help in this regard.
Simon - Nice navigation on the site! I need to check the css fully once I get home, but it seems you have made it work.
Again, thanks for the help. I really appreciate it.
Simon
Sunny,
Thanks for the kind words! It took me a while to get the navigation working on most browsers, but with all the tips and advice from the fantastic CSS community I managed in the end. It’s great to be able to help eachother out!
Cheers,
Simon
Bill Evans → thirteenpixels.com
Beautiful,
By far the cleanest example I’ve seen yet. Kudos for a wonderful job!
Gilles
I’ll check about the vertical tabs later tonight. It’s interesting…
For now, here is what I’ve done so far with the info I got about how to make Tabs “and” Mini-Tabs in CSS.
I downloaded and modified as many examples files that I could, and tried to learn some CSS along the way.
The main thing came from Here , and I added the Mini-Tabs to it, along with what I needed for the final result.
Thanks everybody for sharing your ideas.
Gilles
Richard
I am total greenhorn when it comes to css, but the vertical minitabs seem ideal for my blog (under construction!).
However, I placed a vertical minitab container in a table column, but the container is always centered within the table. How can I force the vertical tabs tp align to the top of the table?
Peter Cooper → www.boog.co.uk/
Here’s another shape for ya, although it might be moving away from the ‘tab’ thing a little bit.. ;-)
Anonymous
I can’t get these to work/view in dreamweaver, (on a WIndows NT SOE) Any tips?
Mark
Very cool, but one thing I noticed is that my trusty p2 400mhz with IE6 sends the CPU to 100% when I mouse over the tabs (or even one tab). I’ve noticed this in the past when looking at snazzy CSS implementations…some don’t trip the CPU at all, others send it to the moon.
Mark
An update on my previous post…the CPU struggle only happens with the mini-tab implementation on simplebits.com proper, not on the mini-tab demo pages.
Cheah Chu Yeow → blog.codefront.net/
Thanks for putting this up! I’d been wanting to get mini-tabs for my blog since I bookmarked this page a looong time ago and finally got down to doing so.
One thing: would you mind if I used your square tab wholesale? I’m a failure at graphic design. If it’s a problem, just let me know (email me) and I’ll promptly remove it.
hoa nguyen
THanks for the vertical mini tabs. I really like them.
I have a question since I am too novice with CSS.
Given a user role-based application, is there a way to
make a menu item invisible/hidden?
For instance on the cheese menu, a specific user role cannot
see “ricotta”, how can “ricotta” be hidden/made invisible on
his displayed menu?
Thanks!
Jaime → www.amorphonet.com
Thanks for the great tip. I have adapted the original code a little to create a 2 level pop up menu. It’s a little buggy in Mozilla, but works great in IE6. I would like to make the 2nd level centered (without going outside the container) on the selected top level item. I will continue working on that. Any input would be greatly appreciated.
Jaime → www.amorphonet.com
Update on my post above.
In IE, you need to click the top-level item to get the 2nd level menu to appear.
Thanks,
Jaime
Louis
great work with the tabs. i really like it :)
i have a little question to you all.
i use the vertical version and want to seperates the links with a -> • (not used as links). i can’t figure it out :(
there will be an linebreak if i simple add them before or after the
can someone please help me with this ? so long keep up the great work :)
best wishes from germany.
Rod
Cool things, these tabs! I like it! Used a vertical version - no problems faced. Thanks!
Comments have been closed for this entry.
IconShoppe Icons to go
FoameeWho do you owe?
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…