Горизонтальные вкладки с анимацией

Пример

Вкладка 1
Вкладка 2 с длинным текстом
Вкладка 3
Вкладка 4

Контент для вкладки 1

Контент для вкладки 2

В которой больше текста

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Контент для вкладки 3

Контент для вкладки 4

HTML

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Вкладка 1</a></li>
		<li><a href="#tabs-2">Вкладка 2</a></li>
		<li><a href="#tabs-3">Вкладка 3</a></li>		
	</ul>
	<div id="tabs_container">
		<div class="tab_block" id="tabs-1">Контент для вкладки 1</div>
		<div class="tab_block" id="tabs-2">Контент для вкладки 2</div>
		<div class="tab_block" id="tabs-3">Контент для вкладки 3</div>
	</div>
</div>

<ul>

<li><a href="#tabs-1">Вкладка 1</a></li>

<li><a href="#tabs-2">Вкладка 2</a></li>

<li><a href="#tabs-3">Вкладка 3</a></li>

</ul>

<div class="tab_block" id="tabs-1">Контент для вкладки 1</div>

<div class="tab_block" id="tabs-2">Контент для вкладки 2</div>

<div class="tab_block" id="tabs-3">Контент для вкладки 3</div>

</div>

CSS

#tabs {
	margin: 20px 0;
}
#tabs ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 2px;
}
#tabs li {
	margin: 2px;
}
#tabs li a {
	display: block;
	padding: 8px 16px;
	font-size: 13px;
	font-family: Verdana, sans-serif;  
	letter-spacing: .2px;
	font-weight: bold;
	text-transform: uppercase;
	background: #BFE2FF;
	text-decoration: none;
	color: #337AB7;
	transition: all 0.2s ease-in-out;
}
.tabulous_active {
	background: #337AB7!important;
	color: #FFF!important;
	cursor: default;
}
#tabs li a:hover {
	background: #337AB7;
	color: #FFF;
}
#tabs_container {
	overflow: hidden;
	position: relative;
	border: 2px solid #BFE2FF;
	background: white;
}
#tabs_container .tab_block {
	padding: 20px 30px;
}
.transition {
	transition: all .3s ease-in-out;
	transition-delay: .3s;
}
.make_transist {
	transition: all .3s ease-in-out;
}
.hidescale {
	transform: scale(0.9);
	opacity: 0;
	pointer-events: none;
}
.showscale {
	transform: scale(1);
	opacity: 1;
	transition-delay: .3s;
	pointer-events: auto;
}
.hideleft {
	transform: translateX(-100%);
	opacity: 0;
	pointer-events: none;
}
.showleft {
	transform: translateX(0px);
	opacity: 1;
	transition-delay: .3s;
	pointer-events: auto;
}
.hidescaleup {
	transform: scale(1.1);
	opacity: 0;
	pointer-events: none;
}
.showscaleup {
	transform: scale(1);
	opacity: 1;
	transition-delay: .3s;
	pointer-events: auto;
}
.hideflip {
	opacity: 0;
	transform: rotatey(-90deg) scale(1.1);
	transform-origin: 50% 50%;
	pointer-events: none;
}
.showflip {
	opacity: 1;
	transition-delay: .3s;
	transform: rotatey(0deg) scale(1);
	transform-origin: 50% 50%;
	pointer-events: auto;
}
.tabulousclear {
	display: block;
	clear: both;
}

100

#tabs {

margin: 20px 0;

}

#tabs ul {

display: flex;

flex-wrap: wrap;

list-style: none;

margin: 2px;

}

#tabs li {

margin: 2px;

}

#tabs li a {

display: block;

padding: 8px 16px;

font-size: 13px;

font-family: Verdana, sans-serif;

letter-spacing: .2px;

font-weight: bold;

text-transform: uppercase;

background: #BFE2FF;

text-decoration: none;

color: #337AB7;

transition: all 0.2s ease-in-out;

}

.tabulous_active {

background: #337AB7!important;

color: #FFF!important;

cursor: default;

}

#tabs li a:hover {

background: #337AB7;

color: #FFF;

}

#tabs_container {

overflow: hidden;

position: relative;

border: 2px solid #BFE2FF;

background: white;

}

#tabs_container .tab_block {

padding: 20px 30px;

}

.transition {

transition: all .3s ease-in-out;

transition-delay: .3s;

}

.make_transist {

transition: all .3s ease-in-out;

}

.hidescale {

transform: scale(0.9);

opacity: 0;

pointer-events: none;

}

.showscale {

transform: scale(1);

opacity: 1;

transition-delay: .3s;

pointer-events: auto;

}

.hideleft {

transform: translateX(-100%);

opacity: 0;

pointer-events: none;

}

.showleft {

transform: translateX(0px);

opacity: 1;

transition-delay: .3s;

pointer-events: auto;

}

.hidescaleup {

transform: scale(1.1);

opacity: 0;

pointer-events: none;

}

.showscaleup {

transform: scale(1);

opacity: 1;

transition-delay: .3s;

pointer-events: auto;

}

.hideflip {

opacity: 0;

transform: rotatey(-90deg) scale(1.1);

transform-origin: 50% 50%;

pointer-events: none;

}

.showflip {

opacity: 1;

transition-delay: .3s;

transform: rotatey(0deg) scale(1);

transform-origin: 50% 50%;

pointer-events: auto;

}

.tabulousclear {

display: block;

clear: both;

}

JS

Подключаем библиотеку jQuery и добавляем код плагина:

/*!
	* strength.js
	* Original author: @aaronlumsden
	* Further changes, comments: @aaronlumsden
	* Licensed under the MIT license
*/
;(function ( $, window, document, undefined ) {
    var pluginName = "tabulous",
	defaults = {
		effect: 'scale'
	};
    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('.tab_block').not(':first').not(':nth-child(1)').addClass('hidescale');
				} else if (this.options.effect == 'slideLeft') {
				tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hideleft');
				} else if (this.options.effect == 'scaleUp') {
				tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hidescaleup');
				} else if (this.options.effect == 'flip') {
				tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hideflip');
			}
            var firstdiv = this.$elem.find('#tabs_container');
            var firstdivheight = firstdiv.find('.tab_block:first').height() + 40;
            var alldivs = this.$elem.find('div:first').find('.tab_block');
            alldivs.css({'position': 'absolute','top':'0'});
            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('.tab_block'+thislink).height() + 40;
                if (effect == 'scale') {
                    alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                    thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showscale');
					} else if (effect == 'slideLeft') {
                    alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                    thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showleft');
					} else if (effect == 'scaleUp') {
                    alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                    thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showscaleup');
					} else if (effect == 'flip') {
                    alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                    thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showflip');
				}
                firstdiv.css('height',thisdivwidth+'px');
			});
		},
        yourOtherFunction: function(el, options) {
            // some logic
		}
	};
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            new Plugin( this, options );
		});
	};
})( jQuery, window, document );

/*!

* strength.js

* Original author: @aaronlumsden

* Further changes, comments: @aaronlumsden

* Licensed under the MIT license

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

var pluginName = "tabulous",

defaults = {

effect: 'scale'

};

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('.tab_block').not(':first').not(':nth-child(1)').addClass('hidescale');

} else if (this.options.effect == 'slideLeft') {

tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hideleft');

} else if (this.options.effect == 'scaleUp') {

tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hidescaleup');

} else if (this.options.effect == 'flip') {

tab_content = this.$elem.find('.tab_block').not(':first').not(':nth-child(1)').addClass('hideflip');

}

var firstdiv = this.$elem.find('#tabs_container');

var firstdivheight = firstdiv.find('.tab_block:first').height() + 40;

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

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

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('.tab_block'+thislink).height() + 40;

if (effect == 'scale') {

alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');

thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showscale');

} else if (effect == 'slideLeft') {

alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');

thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showleft');

} else if (effect == 'scaleUp') {

alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');

thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showscaleup');

} else if (effect == 'flip') {

alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');

thisform.find('.tab_block'+thislink).addClass('make_transist').addClass('showflip');

}

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

});

yourOtherFunction: function(el, options) {

// some logic

}

};

$.fn[pluginName] = function ( options ) {

return this.each(function () {

new Plugin( this, options );

});

};

})( jQuery, window, document );

И инициализируем с нужным эффектом:

$(window).on('load resize', function () {
	$('#tabs').tabulous({
		effect: 'scale'
	});
});

$(window).on('load resize', function () {

$('#tabs').tabulous({

effect: 'scale'

});

Возможные эффекты: scale, slideLeft,scaleUp и flip

Плагин tabulous на github

Вячеслав: 27.07.2023 в 00:18

Ссылка на codepen: тут

Ответить
Вячеслав: 27.07.2023 в 00:16

Добрый вечер. Возникла проблема: если в блок-содержание вставлена ссылка, то он по ней не переходит!
Не подскажите как это исправить?

Ответить
- Alexander: 01.08.2023 в 08:25
  
  Добавьте для всех
  .hide... - pointer-events: none;
  .show... - pointer-events: auto;
  В код в теме добавил изменения
  
  Ответить
  - Вячеслав: 02.08.2023 в 22:01
    
    Александр, не помогло!
    
    Ответить
Вячеслав: 07.03.2022 в 23:31

Здравствуйте.

Допустим вместо "Контент для вкладки 1" вставляем js рекламы по тематикам.
Но не грузит.
Подскажите, как-нибудь можно решить проблему?

С уважением Вячеслав.

Ответить
- Alexander: 09.03.2022 в 09:06
  
  Обновил все коды в теме, попробуйте.
  
  Ответить
  - Вячеслав: 10.03.2022 в 14:13
    
    Здравствуйте. Без изменений. Все работает, но вкладка не раскрыта, пока не нажмем.
    Скрин кода и итоговый вывод при заходе на сайт приложил.
    
    С уважением, Вячеслав.
    
    Ответить
  - Вячеслав: 02.08.2023 в 22:12
    
    Нашел проблему! При нажатии на ссылку, он автоматически ей добавлял класс
    
    tabulous_active
    
    . Решил проблему изменив код в плагине:
    
    var links = this.$elem.find('li').find('a');
    
    Спасибо за плагин!
    
    Ответить
  - Вячеслав: 02.08.2023 в 22:14
    
    Решил проблему! В плагине заменил путь к ссылке в списке:
    
    var links = this.$elem.find('li').find('a');
    
    .
    Спасибо
    
    Ответить
Дмитрий: 01.10.2020 в 14:41

Не могу понять, что сделал не так.
При попытке нажать по табам - перекидывает на главную :((

Правда в консоле есть ошибка - Uncaught ReferenceError: jQuery is not defined
at tabulous.js:113

Не могу понять, как решить....

Ответить
- Alexander: 02.10.2020 в 10:27
  
  Судя по ошибке jQuery не определена.
  А на главную перекидывать не должно, проверьте урл, слеш не стоит вначале?
  
  Ответить
Андрей: 26.08.2020 в 01:49
Привет. Ребята, подскажите плиз как прописать правильно конструкцию?

И инициализируем с нужным эффектом:
```
$('#tabs').tabulous({
	effect: 'scale'
});
```
Текст наложился друг на друга в первом табе.
Ответить
- Alexander: 26.08.2020 в 05:16
  
  Вначале JQuery, потом код плагина, потом эта конструкция.
  
  Текст наложился друг на друга в первом табе.
  
  А табы переключаются? Если да, то скорее всего что-то со стилями.
  
  Ответить
  - Андрей: 26.08.2020 в 20:55
    
    Да, табы переключаются. В стилях не менял ничего, все с вашего примера.
    
    Ответить
    - Андрей: 26.08.2020 в 21:09
      
      ссылка. Можете подсказать что не так? Пожалуйста.
      
      Ответить
      - Alexander: 27.08.2020 в 06:06
        
        Это у меня ошибка в коде была...
        Спасибо что обратили внимание. Исправил.
        Нужно:
        
        <div id="tabs-1"></div> <div id="tabs-2"></div> <div id="tabs-3"></div>
        
        Ответить
        
        Андрей: 27.08.2020 в 19:53
        
        Это вам спасибо 🙂
        
        Ответить

Пример

HTML

CSS

JS

Смотрите также:

Анимированные рамки для блоков на CSS

Карточки в виде стикеров для заметок

Мозайка изображений или контента

Добавить комментарий:

Комментарии: