Табы с помощью 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>
				
			

Нажатие на радио-боксы будет активировать соответствующие табы. Первому 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 при помощи которого делаем видимыми блоки соответствующие выбраным радио-боксам.

На этом все! Самостоятельно поработав со стилями вы сможете изменить внешний вид на свой вкус.

Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Web-Дизайн
help2site
СЕО словарь терминов для вэб-мастера

СЕО словарь (глоссарий). СЕО словарь – словарь терминов по сео, т.е. собрание узкоспециальных терминов по данной тематике. Согласитесь, уважаемый читатель, что прежде чем чему-то начать

Windows
help2site
Как изменить рисунок учетной записи в Windows 7

Многие пользователи после установки операционной системы Windows 7 начинают сразу же заниматься ее настройкой и оформлением. Некоторые в процессе могут столкнуться с проблемами, например не

Программы
help2site
Программа Advego Plagiatus

Advego plagiatus, или на русском языке звучит как адвего плагиатус, – это отличная программа проверки на плагиат текстового контента, размещаемого блоггером на своем сайте/блоге. Есть

Windows
help2site
Энергопотребление windows 7

Windows 7 теперь может выводить отчет об энергопотреблении вашего компьютера. Чтобы получить этот отчет, введите в командную строку команду Powercfg. Эта команда создана компанией Microsoft