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

Для створення табів ми будемо використовувати тег inputта CSS селектором :checked. В першу чергу нам доведеться створити розмітку сторінки на HTML

Tab One Tab Two Tab Three

Натискання на радіо-бокси активуватиме відповідні таби. Першому inputвиставляємо атрибут checked=”checked”Це дозволить зробити перший таб за замовчуванням відкритим. Самі радіо-бокси ми сховаємо, а для натискання на них нам послужить тег label. У блоці .tabs_contу нас будуть блоки з табами в яких і розміститься контент (текст, картинки і т.д.) . Поки що все просто.

Переходимо до 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_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 : opacity .5s ease-in-out; ) #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~. : 1;

Насамперед сховаємо всі наші таби. Найпростіше рішення це використовувати display: none;, Але оскільки нам потрібна плавність, легкі шляхи не для нас, тому за допомогою position: absolute;пересуваємо наші блоки за межі видимості та ще робимо цей блок повністю прозорим за допомогою властивості opacity: 0;і плавно піднімаємо це значення до одиниці. Домогтися плавності нам допоможе властивість transition, Яке описано після. Потім знову ж таки скористаємося селектором :checkedза допомогою якого робимо видимими блоки, що відповідають обраним радіо-боксам.

На цьому все! Самостійно попрацювавши зі стилями, ви зможете змінити зовнішній вигляд на свій смак.

Нижче ви можете завантажити вихідні записи.

Продовжуючи попередній пост про стилізацію елементів вибору, хотів би розповісти як зробити повністю адаптивні таби без використання javascript, абсолютного позиціонування та хаків з посиланнями.

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

Давайте зрозуміємо, що ми хочемо бачити як результат роботи і які вимоги ми висуваємо до нього:

1. Робота без JavaScript,
2. Немає прив'язки до кількості табів (ми можемо використовувати один віджет на різних сторінкахз різним контентом усередині),
3. Адаптивність,
4. Максимальна кросбраузерність та кросплатформність,
5. Максимально зручний та зрозумілий UI,
6. Немає обмежень до внутрішнього змісту табів, будь то текст, медіа контент або верстка всередині таба.

Візуально має вийти щось подібне:

Перед тим, як показати свій варіант табів без JSя хотів би розповісти про деякі варіанти реалізацій, які я знайшов у процесі вирішення цього завдання.

Варіант перший

Людина придумала цей спосіб або явно хотіла знущатися з користувачів, або він один з відвідувачів реддита, який створював ті самі «зручні» регулятори гучності. У мене подібний підхід викликає нервовий тик.

Суть методу полягає в наступному:

Як заголовки (самих кнопок) табів використовуються посилання, в атрибут href , яких прописується id відповідної вкладки — div'а або будь-якого іншого елемента. Виділення активної вкладки відбувається за допомогою псевдокласу: target.

Працює це так:

Як ви могли помітити, ми маємо деякі проблеми з використанням даного методу:

1. При натисканні на таб сторінка починає скакати, тому що браузер відправляє нас туди, куди веде це посилання. Уникнути, звичайно ж, цього можна, але без JS вже ні як.
2. Активний заголовок таба не виділяється, це можна зробити, але дуже проблематично.
3. Спочатку активних табів немає (оскільки ми ще не натискали на посилання) і нам доводиться вдаватися до хаку і робити активним третій таб, виділити перший таким способом не вийде.
4. Дуже спірна адаптивність: так, вкладки перебудовуються на новий рядок при звуженні екрану, а контент таба звужується разом з нею, проте це виглядає не дуже красиво. Цю проблему можуть вирішити медіа-запити, проте враховуючи те, що ми ходимо не прив'язуватися до кількості табів, на деяких розмірах дисплеїв проблема залишиться.

Робимо виправданий висновок: цей метод нам не підходить, оскільки не задовольнять більшу частину вимог. Реалізації жахлива, і я не радив би її використовувати.

Варіант другий

Цей метод створення табів без JavaScriptвже практичніший, хоча так само має деякі проблеми у застосуванні. Суть методу в наступному: для заголовків вкладок використовуються елементи checkbox і label, а за допомогою псевдокласу:checked і ще одного div елемента ми можемо показати контент тільки активної вкладки та приховати решту:

Tab-wrapper input:checked + label + .tab-item(display: block;)

Ось як це працює:

Як ви могли помітити, у цьому прикладі ми використовуємо position: absolute; щоб розмістити заголовки вкладок зверху, а контент вкладки знизу. Це створює певні проблеми:

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

Звичайно, в деяких випадках цей метод можна застосовувати, наприклад, коли ви знаєте кількість вкладок і обсяг контенту всередині них. Але ми шукаємо універсальне рішення, тому цей підхід не застосовується в нашому випадку.

Рішення

Третій варіант, і він рішення, є модифікацією другого методу. Працює він так само, проте ми не будемо використовувати абсолютне позиціонування та властивість float для заголовків.

У даному методіми використовуємо нині модний flexbox для розміщення вкладок та їхнього контенту. Вся краса flexbox тут полягає в тому, що ми можемо позначити які елементи відображати спочатку, а які наприкінці. Це можна зробити за допомогою якості order: 1; , Яке за умовчанням дорівнює нулю.

Адаптивність вкладок також досягається рахунок flex властивості flex-grow: 1; , що дозволяє вкладкам розтягуватися на всю ширину контенту, за рахунок цього ми можемо не перейматися відображенням різної кількості табів. Також ми можемо розміщувати контент будь-якого та різного об'єму всередині кожної вкладки, це не впливатиме на відображення контенту після них.

Цей підхід працює у всіх сучасних браузерах, включаючи мобільні. З, незвичних для багатьох, властивостей використовується тільки Flexbox, а він уже давно має широку підтримку. У браузерах FireFox, Chrome, Safari та Opera мною не було виявлено будь-яких проблем із роботою вкладок.

Ви можете перевірити цей підхід на jsfiddle або на своїх проектах. Радий побачити й інші пропозиції вирішення цієї проблеми в коментарях.

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

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

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

У демонстраційному прикладі саме так я й зробив, тож глянувши на вихідники, легко розберетеся що до чого.
Структура вкладок у Html досить проста. Базовий div-контейнер, зв'язування та безпосередньо секції