Mini Tabs: The UN-tab, tab

Let me preface this by saying that the methods used in creating the tabs below are nothing terribly revolutionary or original — but merely are demonstrated to share the idea.

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images. A neat little pop up effect for a selected navigation item:

tabs

Tested in Camino, Safari, IE5/Mac, IE5,6/Win. Take a peek at the working example and code if you are interested.

19 Comments

  1. Marc Richards says:

    Nice demo. I really like your site in general. One criticism though, you highlight the current tab using the following CSS selector:
    #minitabs a:link.active
    Most browsers seem to accept this, but it doesn’t render in Dreamweaver. I checked to see what the CSS 2.1 spec said, and while the didn’t seem to address it outright, the example they gave looked more like this:
    #minitabs a.active:link
    You can find the relevant info here. I was just wondering if you chose to do it this way for a particular reason or if you just did it like that and left it because it works.

  2. Dan says:

    Marc – Good catch. It should be a.active:link, etc. I’ve updated the example code. Thanks!

  3. mariano says:

    Dan, many many thanks i´ve used a simple variation of your minitabs to end my weblog redesign… it worked great on every browser.
    Thanks again.. and i put your credits on my css :)

  4. Wayne says:

    Just a heads up: The tabs break in Opera 6.03 on Mac OS X Panther. It doesn’t seem to render the padding-bottom specification.

  5. Carey says:

    More heads up: it also fails on Opera 6.04 on Win XP (the underline is drawn on top of the text).

  6. jason says:

    This stuff rocks! :-)

  7. artgrrl says:

    Nice example to play around with! Tricky though when it comes to raising certain values as line height. Yesterday it took me some time to put a image in front of the menu. It doesn’t work as a part of li, but when I absoluete position the image by 72px and put the menu aside by 72px all works fine.

  8. vf says:

    I am a fan of these, but am having one odd problem:
    Usually, when it comes to using a list as a menu, I can put text-align in the ul tag for positioning.
    In this case, I would do something like:
    #minitabs ul {
    text-align: right;
    }
    Normally, I see that work well, however I can’t see to get it to go, even after some tinkering. If anyone has an idea, I’m open to suggestions :)

  9. yaoi says:

    Found this link while searching Google, thanks

  10. anna says:

    i want align to right this menu, is possible?

  11. Great site, well done. I enjoy beeing here and i´ll come back soon. You do a great job. Many greetings.

  12. Damian says:

    Great look, have bought Dan’s book and like Anna & VF above would love to align to the right.
    Changing the float on the #mintabs a: to right in the CSS works fine in Firefox (looks great), IE6 they are all stacked on top of each other on the right.
    Have played around but to no avail as yet. Could Dan or anyone offer any insight to working around this?

  13. thateagle says:

    Try using the global DIV tag style to specify the exact position in pixels.
    Here i just used a two column table, the right cell for the menu, and the left empty cell with an invisible image that define the left margin of the menu. (outdated technique, but it works.)

  14. karthik says:

    Im trying to create a tabbed-view effect using only CSS/Javascript..your site gave me some good starting points. Thanks!

  15. Susan Klaas says:

    Very good work, really well done. See you again sometime at this interesting place. Say hi to all people around the world.

  16. slackware says:

    Nice Work!Thx

  17. neal says:

    a w e s o m e

  18. this is quite the w00tness

  19. Rafa says:

    I need some help with the minitabs.
    I´m triying to use 2 minitabs in the same HTML. I´ve duplicated the css to avoid conflicts
    The first minitabs ( from top to bottom ) is aligned to the left and automatically aligns the second one to the right. I need them both to be left aligned. I´m not a CSS expert but I thing that the problem is with the “float property “in the fourth style of the CSS. ANY IDEAS? thanks