About a code

Nav Tab

Navigation tabs for two forms.

Responsive: no

Dependencies: bootstrap.css

About a code

CSS Tab

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Tabs

The + selector selects the next adjacent element. Historically this has been cool for styling labels. With CSS grid, an element can be next to another in markup, but somewhere totally different in display. This pen uses a simple input:checked selector combined with a lot of + "s to style different pages of an imaginary microsite.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Tabs

Radio version of tabs. Requirements: not rely on specific IDs for CSS (the CSS shouldn"t need to know specific IDs), flexible for any number of unkown tabs , accessible. Caveats: since these are checkboxes the tabs not tab-able, need to use arrow keys.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Tabs

Pure CSS vertical tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Tabs With Indicator

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Animated Transition Tabs

Animated transition tabs with checkboxes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Color Tabs

No label pure CSS color tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Only Tabs

Material Design CSS only tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS3 Tabs

Responsive pure CSS3 tabs by Sorax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Tab Controls Using HTML And CSS

Clicking on the labels is effectively the same as clicking on the input boxes. The radio inputs are hidden with CSS. When a radio is selected, their curious tab content neighbors show up. That"s it! The only drawback is you won"t be able to style the selected tab without resorting to some JS, but that shouldn"t be a very big deal.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Tabs

Just HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

В продолжение предыдущего поста про стилизацию элементов выбора, хотел бы рассказать как сделать полностью адаптивные табы без использования 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-контейнер, связка и непосредственно секции