Тема: Эффектные вкладки табы - Tabulous.js (div и а хватает все)
Показать сообщение отдельно
  #6 (permalink)  
Старый 30.01.2016, 15:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,112

tabs модернизация tabulous
runyugin,
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex">



<style class="cp-pen-styles">html{
    background: rgb(101, 92, 137);
        font-family: "Lato", sans-serif;
}
a:active,a:focus {
    outline: expression(hideFocus='true');
}

p {
    margin-bottom: 20px;
}

#wrapper {
    width: 960px;
    margin: 0 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 {
    float: left;
    margin-right: 2px;
    list-style: none;
}

#tabs li a,#tabs2 li a,#tabs3 li a,#tabs4 li a,#tabs5 li a {
    display: block;
    padding: 17px 30px;
    background: #544f6b;
    text-decoration: none;
    color: #8478B3;
}

#tabs li a:hover,#tabs2 li a:hover,#tabs3 li a:hover,#tabs4 li a:hover,#tabs5 li a:hover {
    background: rgb(78, 74, 99);
}

#tabs_container {
    padding: 40px;
    overflow: hidden;
    position: relative;
    background: white;
}

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

.transition {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-transition-delay: .3s;
    transition-delay: .3s;
}

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

.hidescale {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-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);
    -moz-transform: scale(1);
    -o-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;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-transition-delay: .3s;
    transition-delay: .3s;
}

.hideleft {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-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);
    -moz-transform: translateX(0px);
    -o-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;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-transition-delay: .3s;
    transition-delay: .3s;
}

.hideup {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-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;
}

.showup {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-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;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-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);
    -moz-transform: rotatey(-90deg) scale(1.1);
    -o-transform: rotatey(-90deg) scale(1.1);
    -ms-transform: rotatey(-90deg) scale(1.1);
    transform: rotatey(-90deg) scale(1.1);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-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;
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -ms-transition-delay: .3s;
    transition-delay: .3s;

    -webkit-transform: rotatey(0deg) scale(1);
    -moz-transform: rotatey(0deg) scale(1);
    -o-transform: rotatey(0deg) scale(1);
    -ms-transform: rotatey(0deg) scale(1);
    transform: rotatey(0deg) scale(1);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.tabulous_active {
    background: white !important;
    color: #655c89 !important;
}

.tabulousclear {
    display: block;
    clear: both;
}</style></head><body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
    $.fn.tabulous = function(options) {
        var settings = $.extend({
            effect: "scale"
        }, options);
        return this.each(function() {
            var parent = $(this),
                ul = $(">ul", parent),
                links = $(">li a", ul),
                block = $("> div", parent),
                divs = $("> div", block),
                hide = "hide" + settings.effect,
                show = "show" + settings.effect;
            ul.append('<span class="tabulousclear"></span>');
            divs.css({
                "position": "absolute",
                "top": "40px"
            }).addClass("make_transist");
            block.addClass("transition");
            links.each(function(indx, a) {
                var a = $(a);
                a.on("click", function(event) {
                    event.preventDefault();
                    links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
                    var div = divs.eq(indx);
                    divs.removeClass(show).not(div.addClass(show)).addClass(hide);
                    block.height(div.height())
                })
            }).eq(0).click()
        })
    }
})(jQuery);
</script>

<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</p>


        <div>Пролмй блок 1</div>

        <div>Пролмй блок 2
          <a href="#" title="">Промная ссылка 1</a>
        </div>

        <div>
          <div>Пролмй блок 3 <a href="#" title="">Промная ссылка 2</a></div>
        </div>

        <p>Aenean tempor ullamcorper leo.</p>
      </div>

      <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat</p>

      </div>

      <div id="tabs-3">
        <p>Mauris eleifend est et turpis</p>
        <p> Vestibulum non ante</p>
      </div>

    </div>


  </div>





            <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</p>
        </div>

        <div id="tabs-2">
                <p>Morbi tincidunt, dui sit amet</p>

        </div>

        <div id="tabs-3">
                <p>Mauris eleifend</p>
        </div>

        </div>

    </div>


    <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</p>
            </div>

            <div id="tabs-2">
                    <p>Morbi tincidunt</p>

            </div>

            <div id="tabs-3">
                    <p>Mauris eleifend est et turpis</p>
            </div>

        </div>

    </div>



    <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</p>
        </div>

        <div id="tabs-2">
                <p>Morbi tincidunt</p>

        </div>

        <div id="tabs-3">
                <p>Mauris eleifend est et turpis.
                </p>
        </div>

        </div>

    </div>


</div>



<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>

</body></html>
Последний раз редактировалось рони, 30.01.2016 в 15:31.
Ответить с цитированием