Табы на мой взгляд являются одним из лучших решений для тематического структурирования информации, а также для компактного предоставления контента пользователю на одной странице. Сегодня мы разберемся как создать такую функциональную штучку без использования 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>
Нажатие на радио-боксы будет активировать соответствующие табы. Первому input выставляем атрибут checked=»checked», это позволит сделать первый таб по умолчанию открытым. Сами радио-боксы мы спрячем, а для нажатия на них нам послужит тег label. В блоке .tabs_cont у нас будет находятся блоки с табами в которых и разместится контент (текст, картинки и т.д.) . Пока все просто.
Переходим к CSS стилям
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 о котором мы упоминали в начале. Простыми словами, если радио-бокс с id #tab_1 выбран/отмечен, то применяюеся стили к блоку с id #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;, но так как нам нужна плавность, легкие пути не для нас, по этому при помощи position: absolute; передвигаем наши блоки за границы видимости, да еще делаем этот блок полностью прозрачным при помощи свойства opacity: 0; и плавно поднимаем это значение до единицы. Добиться плавности нам поможет свойство transition, которое описано после. Затем опять же воспользуемся селектором :checked при помощи которого делаем видимыми блоки соответствующие выбраным радио-боксам.
На этом все! Самостоятельно поработав со стилями вы сможете изменить внешний вид на свой вкус.
