FancyTabs

by mmarcon

HTML

<section id="tab-panel-left">
    <ul class="tabs">
        <li class="selected">
            <a href="#tab1-left">
                <span class="text">Actions</span>
            </a>
        </li>
        <li>
            <a href="#tab2-left">
                <span class="text">Cmaps &amp; Resources</span>
            </a>
        </li>
        <li>
            <a href="#tab3-left">
                <span class="text">Buddies</span>
            </a>
        </li>
        <li>
            <a href="#tab5-left">
                <span class="text">Groups</span>
            </a>
        </li>
    </ul>
    <div class="tabs-content">
        <section id="tab1-left" class="tab">
            Actions
        </section>
        <section id="tab2-left" class="tab">
            Cmaps &amp; Resources
        </section>
        <section id="tab3-left" class="tab">
            Buddies
        </section>
        <section id="tab5-left" class="tab">
            Groups
        </section>
    </div>
</section>

<section id="tab-panel-right">
    <ul class="tabs">
        <li class="selected">
            <a href="#tab1">
                <img src="http://dl.dropbox.com/u/234787/fancyTabs/File-Manager.png" class="tab-icon"/>
                <span class="tab-badge">5</span>
            </a>
        </li>
        <li>
            <a href="#tab2">
                <img src="http://dl.dropbox.com/u/234787/fancyTabs/User.png" class="tab-icon"/>
                <span class="tab-badge">10</span>
            </a>
        </li>
        <li>
            <a href="#tab3">
                <img src="http://dl.dropbox.com/u/234787/fancyTabs/Group.png" class="tab-icon"/>
                <span class="tab-badge">2</span>
            </a>
        </li>
        <li>
            <a href="#tab4">
                <img src="http://dl.dropbox.com/u/234787/fancyTabs/Email.png" class="tab-icon"/>
                <span class="tab-badge important">2</span>
            </a>
        </li>
        <li>
            <a...

CSS

@import url(http://fonts.googleapis.com/css?family=Quattrocento);

body {
    font-family: sans-serif;    
}

#tab-panel-left {
    width: 300px;
    float: left;
}

#tab-panel-right {
    margin-left: 320px;
}

.tabs-content {
    border: 1px solid #999;
    min-height: 300px;
    position: relative;
}

.tabs {
    position: relative;
    z-index: 5000;
    margin-bottom: -1px;
}

.tabs li {
    display: inline-block;
    border: 1px solid #999;
    background-color: #fff;
    margin-right: 3px;
    padding: 3px;
    position: relative;
    background-color: #ddd;
    min-height: 35px;
}

.tabs li.selected, .tabs li:hover {
    border-bottom: 1px solid #fff;
    background-color: #fff;
}

.tabs a .tab-badge {
    font-size: 10px;
    line-height: 2;
    position: absolute;
    z-index: 5001;
    display: block;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: #4682b4;
    text-align: center;
    border-radius: 10px;
    color: #fff;
    font-weight: normal;
}

.tabs a .text {
    display: block;
    font-size: 12px;
    line-height: 32px;
}

.tabs a .tab-badge.important {
    background-color: #cc0000 !important;
}

.tabs a .tab-badge:empty {
    display:none;
}

.tabs a {
    display: block;
    text-decoration: none;
    color: #333;
    font-weight: 100;
    min-height: 32px;
}

.tab {
    font-family: 'Quattrocento';
    font-size: 36px;
    text-align: center;
    margin-top: 30px;
    color: #ccc;
}

.collapse-control {
    position: absolute;
    border: 3px solid #ccc;
    top: 50%;
    right: -13px;
    width: 20px;
    height: 40px;
    margin-top: -10px;
    text-indent: -999999px;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
}

JavaScript

(function($) {
    var fancyTabsEvents = {
        click: 'click.ft'
    },
    settings = {
        collapsible: false,
        collapseCallback: null,
        expandCallback: null,
        showTabCallback: null
    },
    methods = {
        init: function(options) {
            options = $.extend({}, settings, options);
            return this.each(function() {
                var that = $(this), collapseControl;
                that.find('.tabs-content section').hide().first().show();
                that.children('.tabs').find('a').bind(fancyTabsEvents.click, function(e) {
                    $(this).parent().addClass('selected').siblings().removeClass('selected');
                    that.find('.tabs-content section').hide();
                    that.find($(this).attr('href')).show(0, function(){
                        if($.isFunction(options.showTabCallback)) {
                            options.showTabCallback.apply(this);
                        }
                    });
                    return false;
                });
                if (options.collapsible) {
                    that.css('position', 'relative');
                    collapseControl = $('<div/>').addClass('collapse-control')
                                                 .text('Collapse')
                                                 .click(function(){
                                                     var t = $(this), offset = t.offset();
                                                     if(t.data('c-collapsed')) {
                                                         t.removeData('c-collapsed');
                                                         that.show();
                                                         t.css({
                                                             top: '50%',
                                                             left: 'auto',
                                                             'background-image':...