Назад

Табы с помощью CSS3

Опубликовано в Блог » CSS,
Табы с помощью CSS3

Привет, дорогой друг! Давно я не писал в блоге, но вот наконец я добрался до текстового редактора своего сайта :). Собственно, поехали.

Табы являются отличным способом для компактного предоставления информации пользователю, а также помогают разделить эту информацию на тематические группы. Сегодня мы создадим эту модную штучку без Javascript на одних лишь HTML и CSS3.


При создании табов мы будем пользоваться тегом input и CSS селектером :checked. Ну и начинаем с разметки.

HTML
<section class="tabs">
	<input id="tab_1" type="radio" name="tab" checked="checked" />
	<input id="tab_2" type="radio" name="tab" />
	<input id="tab_3" type="radio" name="tab" />
	
	<label for="tab_1" id="tab_l1">Tab One</label>
	<label for="tab_2" id="tab_l2">Tab Two</label>
	<label for="tab_3" id="tab_l3">Tab Three</label>
	<div style="clear:both"></div>

	<div class="tabs_cont">
		<div id="tab_c1">Content of first tab</div>
		<div id="tab_c2">Content of first second</div>
		<div id="tab_c3">Content of third tab</div>
	</div>
</section>


При нажатии на радио-боксы мы будем активировать соответствующие табы. Для первого выставляем атрибут checked="checked", чтобы сделать по умолчанию открытым первый таб. Сами элементы формы мы спрячем, а нажимать на них нам поможет тег label. Ну и в блоке .tabs_cont у нас находятся блоки с табами. Пока все просто.

CSS

.tabs {
	position: relative;
	margin: 0 auto;
	width: 800px;
}
.tabs label {
	color: #555;
	cursor: pointer;
	display: block;
	float: left;
	width: 150px;
	height: 45px;
	line-height: 45px;
	position: relative;
	top: 2px;
	text-align: center;
}

.tabs input {
	position: absolute;
	left: -9999px;
}

#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2,
#tab_3:checked  ~ #tab_l3 {
	background: #fff;
	border-color: #fff;
	top: 0;
	z-index: 3;
}

.tabs_cont {
	background: #fff;
	position: relative;
	z-index: 2;
	height: 230px;
}


Тут мы делаем тег label блочным элементом и ставим как нам необходимо, прячем input'ы с помощью абсолютного позиционирования. Дальше идет тот самый селектор :checked. Простыми словами, если элемент с #tab_1 отмечен (в нашем случае это тот радио-бокс), то применяем стили к блоку #tab_l1 и т. д. В нашем случае мы применяем стили к выбранному названию таба. Ну и в конце задаем стили к блоку с контентом табов.

Уже что то вырисовывается и это хорошо. Теперь необходимо сделать, чтобы наши табы переключались.

.tabs_cont > div {
	position: absolute;
	left: -9999px;
	top: 0;
	opacity: 0;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
	position: static;
	left: 0;
	opacity: 1;
}


Для начала прячем все табы. Это можно сделать с помощью display: none, но нам нужна плавность, поэтому мы не ищем легких путей. С помощью абсолютного позиционирования сдвигаем наши блоки к собачьим чертям, так сказать, и делаем прозрачность на 0, чтобы потом плавно сменить ее к значению 1. Это мы сделаем с помощью свойства transition, которое описано после. Далее опять же пользуемся селектером :checked и делаем видимыми нам блоки для соответствующих радио-боксов.

Вот и все! Ничего сложного в этом вовсе нет. Немного поработав со стилями можно сделать нечто подобное, что я сделал в демо. Ну и по традиции исходники можно скачать ниже.