Табы с помощью 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 позволяют удалять как каталоги, так и

Аndroid
help2site
DroidWall — настоящий фаервол для ОС Android

DroidWall — это первая программа для Android для контролирование доступа в сеть интернет для приложений. Теперь вы можете не волноваться об трате ценного трафика не

Web-Дизайн
help2site
Добавление пользователя Drupal

Войдя в админ-панель сайта. Если не помните, как прочитайте статью «вход в панель управления» В верхнем административном меню кликнете по пункту «пользователи» : Далее появиться

Оборудование
help2site
Обзор мобильной видеокарты NVIDIA GeForce GTX 780M

Мобильная видеокарта NVIDIA GeForce GTX 780M относиться к классу дорогих графических адаптеров, которые имеют полноценную поддержку технологии DirectX 11. Данный графический чип создан на одной

Интернет
help2site
Как бесплатно раскрутить сайт. Раскрутка сайта бесплатно под Гугл и Яндекс.Раскрутка сайта самостоятельно

Как бесплатно раскрутить сайт под поисковые системы Гугл и Яндекс. Самостоятельная раскрутка сайта в Google и Yandex Как часто люди разочаровываются осознав, что их сайт

Настройка
help2site
Как подключить компьютер к телевизору

Многие пользователи компьютера хотя бы раз задумывались о том, как подключить компьютер к телевизору — ведь кинофильмы и сериалы удобнее всего смотреть на удобном диване

Windows
help2site
Отключаем всплывающие подсказки Windows

Операционная система Windows 7 устроена так, что зачастую пытается давать свои советы – как лучше пользоваться системой, по началу эти подсказки не заметны, однако опытных

Web-Дизайн
help2site
Кнопка возврата на предыдущую страницу

Иногда на сайте возникает потребность поставить кнопку или ссылку возврата на предыдущую страницу. Эту не сложную задачу можно решить при помощи следующего кода: Код для кнопки:

Игры
help2site
Играть бесплатно в игры Gaminator

Сегодня игровые автоматы гаминатор уже успели зарекомендовать себя среди любителей азартных игр и онлайн развлечений. Известнейшая компания Новоматик производитель большинства увлекательных игр с потрясающей графикой,