Tabla De Contenidos para la web

En esta ocasión vamos a ver 4 tabla de contenidos con un efecto de entrada de contenido diferente para cada tabla

Datos:  Clic en Demo para ver como trabaja esta web


                                                          Demo

<div id='wrapper'>

<div id='tabs'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

<div id='tabs2'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

<div id='tabs3'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

<div id='tabs4'>
<ul>
<li><a href='#tabs-1' title=''>Tab 1</a></li>
<li><a href='#tabs-2' title=''>Tab 2</a></li>
<li><a href='#tabs-3' title=''>Tab 3</a></li>
</ul>

<div id='tabs_container'>

<div id='tabs-1'>
   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p><p>Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>

<div id='tabs-2'>
   <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor.</p>

</div>

<div id='tabs-3'>
   <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p><p> Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales.</p>
</div>

</div><!--End tabs container-->

</div><!--End tabs-->

</div>

html {
  background-image: -webkit-linear-gradient(right, #23313f 0%, #2c3e50 50%, #23313f 100%);
  background-image: linear-gradient(to left, #23313f 0%, #2c3e50 50%, #23313f 100%);
  font-family: "Lato", sans-serif;
}

a:active, a:focus {
  outline: expression(hideFocus='true');
}

p {
  margin-bottom: 20px;
}

#wrapper {
  width: 100%;
  margin: auto;
  margin-top: 100px;
}

#tabs, #tabs2, #tabs3, #tabs4, #tabs5 {
  width: 500px;
  margin: 0 auto;
  margin-bottom: 40px;
}

#tabs li, #tabs2 li, #tabs3 li, #tabs4 li, #tabs5 li {
  list-style: none;
  float: left;
  margin-right: 0px;
}

#tabs li a, #tabs2 li a, #tabs3 li a, #tabs4 li a, #tabs5 li a {
  display: block;
  padding: 17px 30px;
  background: #34495E;
  border-left: 0.3em groove #e74c3c;
  border-right: 0.3em ridge #e74c3c;
  text-decoration: none;
  color: #fff;
  border-top: 0.3em solid #E74C3C;
}

#tabs li a:hover, #tabs2 li a:hover, #tabs3 li a:hover, #tabs4 li a:hover, #tabs5 li a:hover {
  background: #2C3E50;
  border-left: 0.3em groove #3498DB;
  border-right: 0.3em ridge #3498DB;
  border-top: 0.3em solid #3498DB;
}

#tabs_container {
  border: 0.3em solid #1ABC9C;
  padding: 40px;
  overflow: hidden;
  top: -20px;
  position: relative;
  background: #34495E;
  color: #fff;
  border-right: 0.3em ridge #1ABC9C;
  border-left: 0.3em groove #1ABC9C;
}

#tabs_container div {
  margin-right: 40px;
}

.transition {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.make_transist {
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.hidescale {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  opacity: 0;
}

.showscale {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.hideleft {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.showleft {
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.hidescaleup {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
}

.showscaleup {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.hideflip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: rotatey(-90deg) scale(1.1);
  -ms-transform: rotatey(-90deg) scale(1.1);
  transform: rotatey(-90deg) scale(1.1);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.showflip {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  -webkit-transform: rotatey(0deg) scale(1);
  -ms-transform: rotatey(0deg) scale(1);
  transform: rotatey(0deg) scale(1);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.tabulous_active {
  background: #23313F !important;
  border-right: 0.3em ridge #1ABC9C !important;
  border-left: 0.3em groove #1ABC9C !important;
  border-top: 0.3em solid #1ABC9C !important;
  border-bottom: 0.3em solid #1ABC9C !important;
  color: #fff !important;
}

.tabulousclear {
  display: block;
  clear: both;
}

 $(document).ready(function ($) {

    $('#tabs').tabulous({
        effect: 'scale'
    });

    $('#tabs2').tabulous({
        effect: 'slideLeft'
    });

    $('#tabs3').tabulous({
        effect: 'scaleUp'
    });

    $('#tabs4').tabulous({
        effect: 'flip'
    });
});

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

    var pluginName = "tabulous",
        defaults = {
            effect: 'scale'
        };

    // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

    function Plugin(element, options) {
        this.element = element;
        this.$elem = $(this.element);
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function () {

            var links = this.$elem.find('a');
            var firstchild = this.$elem.find('li:first-child').find('a');
            var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

            if (this.options.effect == 'scale') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
            } else if (this.options.effect == 'slideLeft') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
            } else if (this.options.effect == 'scaleUp') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
            } else if (this.options.effect == 'flip') {
                tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
            }

            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('div:first').height();

            var alldivs = this.$elem.find('div:first').find('div');

            alldivs.css({
                'position': 'absolute',
                'top': '40px'
            });

            firstdiv.css('height', firstdivheight + 'px');

            firstchild.addClass('tabulous_active');

            links.bind('click', {
                myOptions: this.options
            }, function (e) {
                e.preventDefault();

                var $options = e.data.myOptions;
                var effect = $options.effect;

                var mythis = $(this);
                var thisform = mythis.parent().parent().parent();
                var thislink = mythis.attr('href');


                firstdiv.addClass('transition');

                links.removeClass('tabulous_active');
                mythis.addClass('tabulous_active');
                thisdivwidth = thisform.find('div' + thislink).height();

                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showscale');
                } else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showleft');
                } else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showscaleup');
                } else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('div' + thislink).addClass('make_transist').addClass('showflip');
                }


                firstdiv.css('height', thisdivwidth + 'px');
            });
        },

        yourOtherFunction: function (el, options) {
            // some logic
        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            new Plugin(this, options);
        });
    };

})(jQuery, window, document);