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

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

Свежие записи
Программы
help2site
TeuxDeux – простой и удобный планировщик задач.

Что ни говори, а планировщики задач, всяческие to-do списки, в наше время актуальны до нельзя. Сложно встретить человека, который не использует для планирования тетрадку, специальные

Программы
help2site
Установка Интернет Контроль Сервис на VirtualBox

VirtualBox (Oracle VM VirtualBox) — программный продукт виртуализации для операционных систем Microsoft Windows, Linux, FreeBSD, Mac OS X, Solaris/OpenSolaris, ReactOS, DOS и других, разработанный компанией Innotek, в настоящее

Настройка
help2site
Сигналы биос при включении пк

Сборник сигналов БИОС Оглавление Как определить какие сигналы БИОС передает нам? При каждом запуске компьютера мы слышим одинарный писк, он пищит не просто так, прежде

Программы
help2site
10 необычных приложений для обработки фото

В Google Play можно найти сотни приложений, позволяющих редактировать фотографии на любой вкус и цвет. Однако современное фотоискусство часто выходит за рамки привычного, заставляя человека

Web-Дизайн
help2site
Установка веб-сервера Apache

В прошлый раз мы разобрались с тем, что такое web-сервер. Самым популярным на сегодняшний момент является веб-сервер Apache. Сегодня я расскажу вам как быстро и правильно установить apache.

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

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

Web-Дизайн
help2site
Установка и настройка PHP

В прошлой заметке я рассказал, как установить Apache, а сегодня мы поговорим об установке PHP. Как и в случае с Apache здесь нет ничего сложного. Если вы