Drag-able Tab Slider

drag-tab-slider.css

/* Dragable Slider */
.slider-wrapper { background: #DDD; width: 540px; }

.handle-containment { height: 34px; position: relative; }

.handle { position: relative; display: inline-block; height: 34px; width: 180px; top: -34px; padding-bottom: 1px; background: rgba(0, 0, 0, 0); font-weight: bold; color: #FFF; text-decoration: none; text-align: center; line-height: 34px; text-indent: -9999px; }

.nav-areas { margin: 0; position: relative; }
.nav-areas li { float: left; height: 34px; list-style: none; text-align: center; width: 180px; }
.nav-areas a { color: white; font-size: 0.8125em; line-height: 34px; text-decoration: none; display: block; cursor: pointer; position: relative; z-index: 20; }
.nav-areas .on a { color: black; }
.nav-areas .on.divisions a { color: white; }

.rtp-upper-tab, .rtp-bottom-tab { background: #24ABE3; color: white; display: inline-block; font-weight: bold; height: 34px; left: 0; line-height: 34px; padding-bottom: 1px; position: absolute; text-align: center; text-decoration: none; text-indent: -9999px; top: 0; width: 180px; z-index: 10; }

.rtp-upper-tab { background: rgba(0, 0, 0, 0); z-index: 100; }

drag-tab-slider.html

<div class="slider-wrapper ui-corner-tr ui-corner-tl">

    <ul class="nav-areas ui-corner-all">
        <li><a>Meetings</a></li>
        <li><a>Events</a></li>
        <li><a>Support</a></li>
    </ul><!-- /nav-areas -->

</div><!-- /nav-wrapper -->

<div class="nav-content ui-corner-br ui-corner-bl">
    <div>
        <h3>Meetings</h3>
        <p>As members we hold meetings to discuss our current and future projects, also to touch bases with other members and provide feedback about things going on in the district.<p>
    </div>

    <div>
        <h3>Events</h3>
        <p>STEP Leaders present, participate, support, and volunteer at major conferences and events such as:</p>
    </div>

    <div>
        <h3>Support</h3>
        <p>STEP Leaders go out to KSD schools to assist teachers and students with media projects. We help teach software such as:</p>
    </div>
  </div><!-- /nav-content -->
  
  <script src="js/jquery-1.8.2.min.js"></script>
  <script src="js/jquery-ui-custom.min.js"></script>

drag-tap-slider.js

/*!
* Draggable Navigation Plugin
* Description: Use the draggable handle to show/hide content
*/

/* Utility : Object.create dosen't work all browsers. */
if ( typeof Object.create !== 'function' ) {
  Object.create = function( obj ) {
  	function F() {};
		F.prototype = obj;
		return new F();
	};
}

(function ($, window, document, undefined) {

    var Slider = {

        init: function (config) {
            /* Set up elements with variables */
            this.sliderContent = config.sliderContent;
            this.sectionsWrap = config.sectionsWrap;

            /* Selects <a> */
            this.sectionsLinks = this.sectionsWrap.children().children();

            this.createHandle();
            this.bindEvents();
            this.showFirst();
        },

        createHandle: function() {
            /* Create draggable handle */
            /* If user doesn't have JS, defaults to scrolling, i.e. no drag handle showing. */
            this.sectionsWrap.parent().append(
                $(document.createElement('div'))
                    .addClass('handle-containment')
                    /* .append($(document.createElement("a")).addClass("handle ui-corner-all").text("DRAG")) */
                    .append('<a class="handle ui-corner-all ui-draggable"><span class=rtp-upper-tab>Upper</span><span class=rtp-bottom-tab>DRAG</span></a>')
            );

            /* Select handle */
            this.sliderHandle = $('.handle');
            
            /* How many sections do we have, and what is the total width of the navbar */
            var sectionCount = this.sectionsLinks.length,
                handleWidth = this.sliderHandle.width(),
                totalWidth = sectionCount * handleWidth;

            /* We need to explicitly set the container width so that all positioning works */
            this.sliderHandle.parent().add(this.sectionsWrap).attr({ style: 'width: '+ totalWidth +'px;' });
            /* Set the sections to the width of the handle for alginment */
            this.sectionsWrap.children().css('width', handleWidth);
        },

        bindEvents: function () {
            this.sectionsLinks.on('click', this.wasClicked);
            this.sliderHandle.on('mousedown', this.dragLightUp);
            this.sliderHandle.on('mouseup', this.dragLightOff);
        },

        showFirst: function () {
            this.sliderContent.children().hide();
            this.sliderContent.children(':first').show();
            this.sectionsWrap.children(':first').addClass('on');

            this.setUpDrag();
        },

        setUpDrag: function () {
            this.sliderHandle.draggable({
                axis: 'x',
                containment: 'parent',
                stop: function (event, ui) {
                    var left = ui.position.left,
                        self = Slider,
                        position = 1,
                        num_sections = self.sectionsLinks.length,
                        section_width = Math.floor(self.sectionsWrap.width() / num_sections);

                    left = Math.round(left / section_width);
                    position = (left * section_width);

                    if (position < section_width) {
                        position = 0.1;
                        left = 0;
                    }

                    if (position) {
                        $(this).animate({
                            left: position
                        }, 200);

                        left = left += 1;
                        Slider.contentTransitions(left);
                    }
                }
            });
        },

        wasClicked: function (e) {
            var self = Slider, /* Is callback of click event */
                index = self.sectionsLinks.index(this),
                num_sections = self.sectionsLinks.length,
                section_width = Math.floor(self.sectionsWrap.width() / num_sections),
                position = index * section_width;

            if (position < section_width) {
                position = 0.1;
            };

            if (position) {
                $(self.sliderHandle).animate({
                    left: position
                }, 400);

                var left = index += 1;
                self.contentTransitions(left);
            }

            e.preventDefault;
        },

        dragLightUp: function () {
            /* Is callback of click event */
            Slider.sectionsWrap.children().addClass('on divisions');
            Slider.sectionsWrap.children(':first-child').removeClass('divisions');
        },

        dragLightOff: function () {
            /* Is callback of click event */
            Slider.sectionsWrap.children().removeAttr("class");
        },

        contentTransitions: function (left) {
            this.sliderContent.children().fadeOut(300, 'linear');
            this.sliderContent.children(':nth-child(' + left + ')').delay(299).fadeIn(600, 'linear');

            this.sectionsWrap.children().removeAttr('class');
            this.sectionsWrap.children(':nth-child(' + left + ')').addClass('on');
        }
    };

    Slider.init({
        sliderContent: $('.nav-content'),
        sectionsWrap: $('.nav-areas')
    });
})(jQuery, window, document);