Табы с помощью 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 и делаем видимыми нам блоки для соответствующих радио-боксов.
Вот и все! Ничего сложного в этом вовсе нет. Немного поработав со стилями можно сделать нечто подобное, что я сделал в демо. Ну и по традиции исходники можно скачать ниже.