Rotated Tabs

Cross-browser compliant rotated tabs to manage the display of a series of div elements.

by Troy Alford

HTML

<tabs>
    <tab tabName="Tab1">Lorem ipsum dolor...</tab>
    <tab tabName="Tab2">The quick brown fox...</tab>
    <tab tabName="Tab3 is super duper long">He sells sea shells...</tab>
</tabs>

CSS

tabs {
    display: inline-block;
    position: relative;
    height: 300px;
    width: 500px;
}

tabs>tab {
    border: 1px solid #666;
    display: none;
    left: 19px;
    padding: 10px;
    position: relative;
    height: 100%;
    width: 100%;
}

tabs>tabset {
    position: absolute;
    width: 20px; max-width: 20px;
    margin-top: 20px;
}
tabs>tabset>tab {
    border: 1px solid #666;
    -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    display: block;
    position: relative;
    width: 18px;
}
tabs>tabset>tab>span {
    position: absolute;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    white-space: nowrap;
}

tabs>tabset>tab.selected {
    background-color: #336699;
    color: #fff;
}
tabs>tab.selected {
    display: block;
}

JavaScript

$(function() {
    $('tabs').each(function () {
        var $tabs = $(this);
        var $tabset = $('<tabset />').prependTo($tabs);
        
        $tabs.children('tab').each(function() {
            var $tabBody = $(this);
            var $tabset = $tabBody.parent().children('tabset');
            var $tab = $('<tab />').appendTo($tabset);
            var $tabText = $('<span />').html($tabBody.attr('tabName')).appendTo($tab);
            
            $tab.bind('click.Tabs', function() {
                var $this = $(this).add($tabBody); // Affect both the tab & the tab's display
                $this.addClass('selected')
                     .siblings().removeClass('selected');
            }).css({
                'height': ($tabText.outerWidth() + 20) + 'px'
            });
            
            $tabText.css({
                'top': (Math.ceil($tab.outerHeight() / 2) - 10) + 'px',
                'left': Math.ceil(10 - ($tabText.outerWidth() / 2)) + 'px'
            });
        });
        
        $tabset.children('tab').first().trigger('click.Tabs');
    });
});