Vertical tabs and text rotation

Question

I want tabs along the left side of the page instead of across the top. I'm already loading JQuery for other reasons (effects), so I prefer using JQuery to another UI framework. Searches on "vertical tabs jquery" yield links to works-in-progress.

Is getting Vertical Tabs to work across browsers fraught, or is it so trivial that, once you have a solution, it doesn't seem worthwhile to post example code?

In the following screenshot, the vertical tabs are outlined in red: http://cl.ly/image/2y0t1f1L0u00

#tab li {
    cursor: pointer;
    font-size: 12px;
    line-height: 12px;
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    width: 140px;
    height: 130px;
    padding: 0 !important;
    -webkit-transform: rotate(-90deg) translate(-30px, 60px);
       -moz-transform: rotate(-90deg) translate(-30px, 60px);
        -ms-transform: rotate(-90deg) translate(-30px, 60px);
         -o-transform: rotate(-90deg) translate(-30px, 60px);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#tab li a {
    display: inline;
    margin: 55px 0 0 -25px;
}

Answer 1

JSFiddle Demo   (tested fine in IE8/9/10, Firefox, Chrome, Safari, Opera)

Key points

• It's simpler to create a horizontal tab bar and rotate all of it at once, rather than rotating each tab item separately.
• Avoid using both the BasicImage filter and -ms-transform, because the rotation would be applied twice in IE9. The BasicImage filter applies to IE8/9. -ms-transform applies to IE9. transform applies to IE10. Using a combination of the BasicImage filter and transform covers IE8/9/10.
• A transformed element occupies the same space in the layout that it occupied before the transformation (the horizontal space across the width of the screen), even though it's displayed at a different location. In this version of the demo, the layout space it occupies is shown in blue. One way to avoid having this unwanted space taken up in the layout is to give the element absolute position, so that it doesn't occupy any space in the layout. Another option is to give the next element a negative top margin (to "consume" the layout space of the transformed element).

HTML

<div class="wrapper">
    <ul id="tab">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

CSS

.wrapper {
    position: relative;
    width: 488px;
}
#tab {
    position: absolute;
    height: 52px;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(-90deg) translate(-488px, 0px);
       -moz-transform: rotate(-90deg) translate(-488px, 0px);
         -o-transform: rotate(-90deg) translate(-488px, 0px);
            transform: rotate(-90deg) translate(-488px, 0px);         /* IE10 */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE8/9 */
    ...
}
#tab li {
    float: left;
    width: 120px;
    height: 50px;
    border: 1px solid #000;
}
#tab li a {
    display: block;
    padding: 10px;
    ...
}
...

Answer 2

Expanding on Matt Coughlin's answer, this worked for me better, without having to hardcode lengths in pixels, so that the tabs can have variable length:

#tab {
   position: absolute;
   -webkit-transform-origin: 100% 0;
      -moz-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
           transform-origin: 100% 0;
   -webkit-transform: translate(-100%, 0) rotate(-90deg);
      -moz-transform: translate(-100%, 0) rotate(-90deg);
        -o-transform: translate(-100%, 0) rotate(-90deg);
           transform: translate(-100%, 0) rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

It sets the transform origin on the top right corner of the tab strip, then first translates the whole strip left by 100%, and finally performs the rotation.