Адаптивные табы под мобильные устройства

Рассмотрим адаптивные табы, которые меняют свои размеры под экраны мобильных устройств и выглядят очень удобно.
HTML разметка будет состоять из главного div’a контейнера с классом .container-tab внутри будет список самих табов.

Демо

<div class="container-tab">
<ul class="accordion-tabs">
 	<li class="tab-head-cont"><a class="is-active" href="#">Вкладка</a><section>....</section></li>
 	<li class="tab-head-cont"><a href="#">Вторая вкладка</a><section>....</section></li>
</ul>
</div>

Подключаем Jquery, если у вас он не подключен на сайте, и не большой скрипт работы табов.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(document).ready(function () {
		$('.accordion-tabs').children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
		$('.accordion-tabs').on('click', 'li > a', function(event) {
			if (!$(this).hasClass('is-active')) {
				event.preventDefault();
				$('.accordion-tabs .is-open').removeClass('is-open').hide();
				$(this).next().toggleClass('is-open').toggle();
				$('.accordion-tabs').find('.is-active').removeClass('is-active');
				$(this).addClass('is-active');
			} else {
				event.preventDefault();
			}
		});
	});
</script>

Далее стилизуем наши табы

.container-tab{
	margin:auto;
	max-width:100%;
	padding:0 10px;
}
/* TABS */
.accordion-tabs {
	*zoom: 1;
	width: 100%;
	border: 1px solid #dddddd;
	border-radius: 0.1875em;
	margin-bottom: 1.5em; 
	margin-left:0;
	padding-left:0;
}
    .accordion-tabs:before, 
	.accordion-tabs:after {
		content: " ";
		display: table;
	}
    .accordion-tabs:after {
		clear: both; 
	}
		.accordion-tabs li{
			list-style:none;
		}
			.accordion-tabs li.tab-head-cont:first-child a {
				border-top-left-radius: 0.1875em;
				border-top-right-radius: 0.1875em;
				border-top: 0;
			}
			.accordion-tabs li.tab-head-cont:last-child a {
				border-bottom-left-radius: 0.1875em;
				border-bottom-right-radius: 0.1875em; 
			}
			.accordion-tabs li.tab-head-cont a {
				text-decoration:none;
				border-top: 1px solid #dddddd;
				color: #888888;
				display: block;
				padding: 0.75em 0.809em;
			}
			.accordion-tabs li.tab-head-cont a:hover {
				color: #000000;
			}
			.accordion-tabs li.tab-head-cont a:focus {
				outline: none;
			}
			.accordion-tabs li.tab-head-cont a.is-active {
				background-color: #f7f7f7;
				border-bottom: 0; 
				color:#333333;
			}
		.accordion-tabs li.tab-head-cont section {
			padding: 1.5em 1.618em;
			background: #f7f7f7;
			display: none;
			overflow: hidden;
			width: 100%; 
		}

/* RESPONSIVE */
@media screen and (min-width: 40em) {
	.accordion-tabs {
		border: none;
		position: relative; 
	}
		.accordion-tabs li.tab-head-cont {
			display: inline; 
		}
			.accordion-tabs li.tab-head-cont:last-child a {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			} 
			.accordion-tabs li.tab-head-cont a {
				display: inline-block;
				vertical-align: baseline;
				zoom: 1;
				*display: inline;
				*vertical-align: auto;
				border-top: 0;
				border-top-right-radius: 0.1875em;
				border-top-left-radius: 0.1875em; 
			} 
			.accordion-tabs li.tab-head-cont a.is-active {
				background-color: #f7f7f7;
				border: 1px solid #dddddd;
				border-bottom: 1px solid #f7f7f7;
				margin-bottom: -1px; 
			}
			.accordion-tabs li.tab-head-cont section {
				border-bottom-left-radius: 0.1875em;
				border-bottom-right-radius: 0.1875em;
				border: 1px solid #dddddd;
				float: left;
				left: 0;
				padding: 0.75em 0.809em;
			}
				.accordion-tabs li.tab-head-cont section p {
					-webkit-columns: 2;
					-moz-columns: 2;
					columns: 2;
				}
}

Comments:0

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

Ваш адрес email не будет опубликован.