Mini-Tab Shapes

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.

See the codeThe 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

  1. Pierce says:

    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…

  2. 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?

  3. afrael says:

    Excellent !!!
    Great Work Dan…

  4. Ben Scofield says:

    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.

  5. Dan says:

    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.

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

  7. adn says:

    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.

  8. Mike says:

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

  9. Ben Scofield says:

    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.

  10. Dan says:

    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.

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

  12. Paul Watson says:

    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.

  13. chris says:

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

  14. Sunny says:

    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.

  15. Dan says:

    Thanks for all the positive comments!
    Sunny – wow, fantastic! Great work – they really do work well horizontally as well.

  16. Pierce says:

    The vertical pyramids look really great, as I thought they would.
    I suppose one could change the colour scheme fairly simply…. hmm…

  17. Jarod Lam says:

    Wow. Keep up the great ideas. I love these!

  18. dagny says:

    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.

  19. Vuarnet says:

    Nice menus… I like it too…

  20. Dan the tab man does it again! Very nice work! *applauds*

  21. Remi says:

    Nice tabs. I made use of them.

  22. Ian says:

    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.

  23. Pierce says:

    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

  24. Just a comment to improve your markup. Use the del and ins element to mark document changes ;).

  25. Sunny says:

    I present the Other Tab. The fun just never ends!

  26. Jeff Croft says:

    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

  27. Paul says:

    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.

  28. Sunny says:

    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.

  29. Dan says:

    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.

  30. Simon says:

    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

  31. Sunny says:

    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.

  32. Pierce says:

    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.

  33. Sunny says:

    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.

  34. 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).

  35. Gilles Caron says:

    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.

  36. Gilles Caron says:

    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…)
    arrows

  37. eric says:

    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.

  38. Simon Griffee says:

    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

  39. Sunny says:

    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.

  40. Simon says:

    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

  41. Bill Evans says:

    Beautiful,
    By far the cleanest example I’ve seen yet. Kudos for a wonderful job!

  42. Gilles says:

    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.
    Tabs+Mini-Tabs
    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

  43. Richard says:

    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?

  44. Peter Cooper says:

    Here’s another shape for ya, although it might be moving away from the ‘tab’ thing a little bit.. ;-)
    http://www.css-2.com/temp/yetanothertab.html

  45. Anonymous says:

    I can’t get these to work/view in dreamweaver, (on a WIndows NT SOE) Any tips?

  46. Mark says:

    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.

  47. Mark says:

    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.

  48. 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.

  49. hoa nguyen says:

    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!

  50. Jaime says:

    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.

    http://www.amorphonet.com/mini-tabs.htm

  51. Jaime says:

    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

  52. Louis says:

    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 -> •

  53. Rod says:

    Cool things, these tabs! I like it! Used a vertical version – no problems faced. Thanks!