Табы (вкладки) для сайта на CSS и JavaScript
Простая вкладка для сайта . Служит для вывода большого количества информации и не только. Для установки на сайт распихиваем всё по нужным местам. Если что не получилось пишите.
HTML
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="">Вкладка 1</a></li>
<li><a href="#tabs-2" title="">Вкладка 2</a></li>
<li><a href="#tabs-3" title="">Вкладка 3</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p>Я иду по улице в зеленом пиджаке.</p>
</div>
<div id="tabs-2">
<p>Я иду по улице в зеленом пиджаке.</p>
</div>
<div id="tabs-3">
<p>Я иду по улице в зеленом пиджаке.</p>
</div>
</div>
</div>
Подключаем стили
CSS
/* tabs */
#tabs ul {list-style:none;margin:0;padding:0}
#tabs {width:100%;margin:0 auto;margin-bottom:40px}
#tabs li {float:left;margin-right:2px;}
#tabs li a {display:block;padding:17px 30px;font-weight:500;background:#f2554c;text-decoration:none;color:#fff}
#tabs li a:hover {background:#f2554c;color:#fff}
#tabs_container{padding:40px;overflow:hidden;border-radius:0 10px 10px 10px;position:relative;background:#fff;color:#333}
#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}
.hidescaleup{-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}
.showscaleup{-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:#fff!important;color:#655c89!important}
.tabulousclear{display:block;clear:both}
Подключаем скрипт
JS
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
* Licensed under the MIT license
*/
;(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 );
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS css CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Заголовок верхнего уровня в HTML