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

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

CSS3

/ * Базовий контейнер табів * / .tabs (min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto;) / * Стилі секцій з вмістом * / .tabs\u003e section (display: none; padding : 15px; background: #fff; border: 1px solid #ddd;) .tabs\u003e section\u003e 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\u003e input (display: none; position: absolute;) / * Стилі перемикачів вкладок (табів) * / .tabs\u003e 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\u003e label: before (font-family: fontawesome; font-weight: normal; margin-right: 10px;) .tabs\u003e label: before (content: " \\ f19a ";) .tabs\u003e label: before (content:" \\ f17a ";) .tabs\u003e label: before (content:" \\ f13b ";) .tabs\u003e label: before (content:" \\ f13c ";) / * Зміни стилю перемикачів вкладок при наведенні * / .tabs\u003e label: hover (color: # 888; cursor: pointer;) / * Стилі для активної вкладки * / .tabs\u003e 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\u003e label (font-size: 0;) .tabs\u003e label: before (margin: 0; font-size: 18px;)) / * Змінюємо внутр енніе відступи * перемикачів для малих екранів * / @media screen and (max-width: 400px) (.tabs\u003e label (padding: 15px; ))

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

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

Якщо ви втомилися працювати з англомовними шаблонами і мрієте про шанс користуватися русифікованими шаблонами, то ви напевне зрадієте однієї відмінною новини. На маркетплейсе TemplateMonster з'явилися ті самі готові рішення, які вам потрібні. Так-так, на сайті тепер можна ознайомитися з кращими. Локалізовані шаблони - це саме те, що потрібно, якщо ви хочете побудувати свій онлайн-проект за мінімальну кількість часу. Крім того, що тексти для шаблонів писалися вручну, вони мають усі необхідними інструментами для створення професійного сайту.

З повагою Андрій

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

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

Tab One Tab Two Tab Three

Натискання на радіо-бокси буде активувати відповідні таби. першому input виставляємо атрибут checked \u003d "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_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\u003e 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 за допомогою якого робимо видимими блоки відповідні вибраних радіо-боксів.

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

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

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

Так само, таби, які ми будемо робити, красивого дезайн, вони істотно прикрасять Ваш сайт. Во как :-) красиво і корисно, мені здається рідкісний збіг. Тим більше робляться вони тільки за допомогою, відповідно: швидко завантажуються, і не несуть ніякого навантаження на сервер.

JQuery

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

Сумісність з браузерами

Ці таби підтримують практично всі браузери, тільки в деяких вони будуть виглядати трохи інакше, тому що багато, ще поки, не підтримують CSS3.

Ось і все, сподіваюся Вам сподобалося :-) Якщо що то Вам буде не зрозуміло обов'язково питайте в коментарях. До зустрічі.

В продовження попереднього поста про стилізацію елементів вибору, хотів би розповісти як зробити повністю адаптивні таби без використання 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, або на своїх проектах. Буду радий побачити й інші пропозиції варіантів розв'язання проблеми в коментарях.

Добрий вечір! Сьогодні я вам розповім, яким чином можна зробити таби (вкладки) на чистому css3 без будь-якого використання jquery або інших скриптів. Як ви вже знаєте, чим менше ви будете використовувати скриптів, тим краще для вашого сайту, і тим швидше він буде працювати. А швидкість сайту сьогодні один з найважливіших показників його ранжирування в пошукових системах.

Тож почнемо

Адаптивні вкладки (таби) на чистому css і без скриптів

Сьогодні таби є практично на будь-якому сайті. Вони необхідні для того, щоб відображати кілька областей контенту без переходу користувача на інші сторінки. Наприклад, на одному з моїх проектів з розробки інтернет-магазину на Joomla було додавання двох табів, які будуть відображати по 3 товара двох типів: «хіти продажів» і «останні». Прийнято рішення робити їх на чистому css без перезавантаження сайту непотрібними скриптами.

Отже, приступимо.

HTML код для табів з використанням css3 по пунктам

1. В першу чергу нам необхідно створити div з класом «tabs».

2. Додаємо безпосередньо кнопки-перемикали з ім'ям «tabs», при натисканні на які вони будуть включати вміст наших табів.

3. Додаємо їх назва через label

4. Під кнопками, які ми з Вами зробили в пунктах 1-3, ми додаємо вже безпосередньо контент, який нам потрібно виводити. У моєму випадку це три останніх товару і три кращих товару.

Кожен блок у нас має клас tab-content і ідентифікатори tab-content-1 і tab-content-2.

Підсумковий HTML наших майбутніх табів

На цьому ми закінчили з написанням нашого html. Погодьтеся, нічого складного тут не було. Отже, йдемо далі.

CSS стилі для табів з використанням css3 по пунктам

Тепер найцікавіше і складне. Нам потрібно наші таби зробити табами, які будуть перемикатися при кліці 🙂

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

Також, зверніть увагу, що за замовчуванням, ми робимо наші кнопки-перемикачі невидимими

Tabs (max-width: 90%; float: none; list-style: none; padding: 0; margin: 75px auto; border-bottom: 4px solid #ccc;) .tabs: after (content: ""; display: table; clear: both;) .tabs input (display: none;) .tabs label p (padding: 5px; margin-right: 0;) .tabs label (display: block; float: left; width: 50%; color : #ccc; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; line-height: 2; cursor: pointer; box-shadow: inset 0 4px #ccc; border- bottom: 4px solid #ccc; -webkit-transition: all 0.5s; / * Safari 3.1 to 6.0 * / transition: all 0.5s;) .tabs label span (display: none;) .tabs label: hover (color: # 3498db; box-shadow: inset 0 4px # 3498db; border-bottom: 4px solid # 3498db;) .tab-content (display: none; width: 100%; float: left; padding: 15px; box-sizing: border- box; background-color: #ffffff;)

Як змусити це працювати

А тут все просто.

Додаємо наступний css код

Tabs: checked + label (background: #FFF; box-shadow: inset 0 4px # 3498db; border-bottom: 4px solid # 3498db; color: # 3498db;) # tab-first: checked ~ # tab-content-1, # tab-second: checked ~ # tab-content-2 (display: block;)

Рядками вище ми додаємо особи стиль для активного таба використовуючи : Checked + label

# Tab-first: checked ~ # tab-content-1- даний рядок говорить про те, що нам потрібно відобразити контент, який має id \u003d "tab-content-1", якщо tab-firstмає статус checked.

Робимо наші таби адаптивними

Ну ось по суті і все. Наші таби готові :). Ви їх можете змінювати як завгодно, додавати-видаляти. Дякую за увагу 🙂