Адаптивні вкладки (таби) на CSS3

66

Не так давно, ми розглянули найпростіший спосіб реалізації вкладок (табів) з вмістом, без підключення javascript, використовуючи в роботі виключно стандарти CSS3.
Сьогодні я хочу познайомити вас з ще одним, не менш цікавим рішенням щодо формування компактного блоку вкладок (табів), побудованих на чистому CSS3 і використанням елементів адаптивної верстки. Як і в першому варіанті, нічого зайвого і громіздкого, самий мінімум коду css, і у вашому розпорядженні з’явиться адаптивний блок з перемикаються вкладками, який відмінно впишеться в будь-який розділ сторінки, будь то окреме повідомлення, бічна колонка, або ж модальне вікно.

Які зміни були внесені щодо першого варіанту?
Насамперед, блок вкладок став адаптивним, тобто під час перегляду на мобільних пристроях, розмір вкладок змінюється в залежності від розмірів екранів пристроїв, текст заголовків прибирається і залишаються тільки шрифт-іконки, які вказують на зміст змісту тієї чи іншої вкладки.
Шрифт-іконки прикрутив від Font Awesome, колекція дуже багата і до тому ж абсолютно безкоштовна. Ви можете інтегрувати іконки в будь проект використовуючи скачаний набір шрифтів, або ж підключити до вашого файлу стилів css безпосередньо з сайту розробника через @import, використовуючи таку строчку:

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

@import url(“http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css”);

У демонстраційному прикладі саме так я і зробив, так що поглянувши на вихідні коди, легко розберетеся, що до чого.
Структура вкладок в Html досить проста. Базовий div контейнер, зв’язка і безпосередньо секції , в яких прихований до пори до часу певний контент. Всі! Нічого зайвого, ніяких бібліотек js, ні додаткових файлів зображень в оформленні, зовнішній вигляд вкладок, а так само їх функціональність, формується виключно засобами CSS. Звичайно, використання нових стандартів CSS3, не гарантує стабільної роботи у всіх браузерах без винятку, але у сучасних версіях, вкладки працюють відмінно. IE-шка коректно відображає вкладки починаючи з 9-ї версії. Так що якщо вам не байдужа психіка і почуття сприйняття користувачів уперто сидять на більш старих версіях цього «брууузера», даний спосіб створення вкладок краще не застосовувати, а скористатися стабільним рішенням з застосуванням jQuery.

HTML

<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" title="Вкладка 1">Вкладка 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" title="Вкладка 2">Вкладка 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" title="Вкладка 3">Вкладка 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4" title="Вкладка 4">Вкладка 4</label>
<section id="content-tab1">
<p>
Тут розміщуєте будь зміст....
</p>
</section>
<section id="content-tab2">
<p>
Тут розміщуєте будь зміст....
</p>
</section>
<section id="content-tab3">
<p>
Тут розміщуєте будь зміст....
</p>
</section>
<section id="content-tab4">
<p>
Тут розміщуєте будь зміст....
</p>
</section>
</div>

Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4

Тут розміщуєте будь зміст….

Тут розміщуєте будь зміст….

Тут розміщуєте будь зміст….

Тут розміщуєте будь зміст….

Для організації блоків з вмістом я використовував тег з обойми HTML5, який застосовується, в більшості випадків, для поділу на розділи, різні і за змістом, і за змістом, з можливістю використання власних заголовків першого рівня

.
Перемикання вкладок відбувається за допомогою взаємодії атрибут checked в теге і псевдокласу :checked, міцно пов’язаними через ідентифікатори в CSS. В обробці такого методу і спотикається старенький, знаменитий гальмо прогресу Internet Explorer 8, з 9-ї версії все працює в кращому вигляді.

Плавно ми підійшли до найцікавішого, до формування стилів наших вкладок за допомогою магії CSS. Тут справи йдуть ще простіше, особливо розписувати кожну властивість і параметри сенсу немає, в исходниках прописав деякі пояснення, так що думаю розібратися куди і навіщо, труднощів не складе, а виникнуть питання, чи виявите помилку, пишіть в коментарях, обов’язково відповім, і допоможу.

CSS3

/* Базовий контейнер табів */
.tabs {
min-width: 320px;
max-width: 800px;
padding: 0px;
margin: 0 auto;
}
/* Стилі секцій з вмістом */
.tabs>section {
display: none;
padding: 15px;
background: #fff;
 border: 1px solid #ddd;
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
 /* прикрутимо анімацію */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/* Описуємо анімацію властивості opacity */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Ховаємо чекбокси */
.tabs>input {
display: none;
position: absolute;
}
/* Стилі перемикачів вкладок (табів) */
.tabs>label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #aaa;
 border: 0px solid #ddd;
 border-width: 1px 1px 1px 1px;
background: #f1f1f1;
 border-radius: 3px 3px 0 0;
}
/* Шрифт-іконки від Font Awesome у форматі Unicode */
.tabs>label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
.tabs>label[for*="1"]:before {
content: "\f19a";
}
.tabs>label[for*="2"]:before {
content: "\f17a";
}
.tabs>label[for*="3"]:before {
content: "\f13b";
}
.tabs>label[for*="4"]:before {
content: "\f13c";
}
/* Зміни стилю перемикачів вкладок при наведенні */
.tabs>label:hover {
color: #888;
 cursor: pointer;
}
/* Стилі для активної вкладки */
.tabs>input:checked+label {
color: #555;
 border-top: 1px solid #009933;
 border-bottom: 1px solid #fff;
 background: #fff;
}
/* Активація секцій з допомогою псевдокласу :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
 display: block;
}
/* Прибираємо текст з перемикачів
* і залишаємо іконки на малих екранах
*/
@media screen and (max-width: 680px) {
.tabs>label {
font-size: 0;
}
.tabs>label:before {
margin: 0;
font-size: 18px;
}
}
/* Змінюємо внутрішні відступи
* перемикачів для малих екранів
*/
@media screen and (max-width: 400px) {
.tabs>label {
padding: 15px;
}
}

/* Базовий контейнер табів */
.tabs {
min-width: 320px;
max-width: 800px;
padding: 0px;
margin: 0 auto;
}
/* Стилі секцій з вмістом */
.tabs>section {
display: none;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
/* прикрутимо анімацію */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/* Описуємо анімацію властивості opacity */@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Ховаємо чекбокси */
.tabs>input {
display: none;
position: absolute;
}
/* Стилі перемикачів вкладок (табів) */
.tabs>label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #aaa;
border: 0px solid #ddd;
border-width: 1px 1px 1px 1px;
background: #f1f1f1;
border-radius: 3px 3px 0 0;
}
/* Шрифт-іконки від Font Awesome у форматі Unicode */
.tabs>label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
.tabs>label[for*=”1″]:before {
content: “\f19a”;
}
.tabs>label[for*=”2″]:before {
content: “\f17a”;
}
.tabs>label[for*=”3″]:before {
content: “\f13b”;
}
.tabs>label[for*=”4″]:before {
content: “\f13c”;
}
/* Зміни стилю перемикачів вкладок при наведенні */.tabs>label:hover {
color: #888;
cursor: pointer;
}
/* Стилі для активної вкладки */
.tabs>input:checked+label {
color: #555;
border-top: 1px solid #009933;
border-bottom: 1px solid #fff;
background: #fff;
}
/* Активація секцій з допомогою псевдокласу :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
display: block;
}
/* Прибираємо текст з перемикачів
* і залишаємо іконки на малих екранах
*/@media screen and (max-width: 680px) {
.tabs>label {
font-size: 0;
}
.tabs>label:before {
margin: 0;
font-size: 18px;
}
}
/* Змінюємо внутрішні відступи
* перемикачів для малих екранів
*/
@media screen and (max-width: 400px) {
.tabs>label {
padding: 15px;
}
}

Оформити вкладки (таби) ви можете як завгодно, все, що в прикладі, це тільки приклад, моє конкретне бачення продукту, нічого більше. Значення Unicode потрібних вам шрифт-іконок, зможете дізнатися на сайті розробника, для цього просто натисніть на обрану іконку і скопіюйте виданий цифровий код, приблизно такого вигляду: \f13b.
Зверніть увагу, коли ви зменшуєте розмір вікна браузера, вкладки автоматом підлаштовуються під поточний розмір до певного значення (у прикладі 680px), після цього значення, текстові заголовки вкладок зникають, залишаються іконки. Тим самим досягається максимальна компактність всього блоку вкладок, залишається лише правильно підібрати ці самі іконки, підходящі за змістом представленому контенту всередині вкладок.

ДемоСкачать

На цьому мабуть і все. Дивіться живий приклад роботи вкладок (табів), скачивайте исходники, експериментуйте з параметрами, і творіть, творіть, творіть…