Вкладки-Табы на CSS

Известны 3 способа организации вкладок на чистом CSS — при помощи overflow, :checked и :target. Пристального рассмотрения заслуживают первые два из них.

Итак, как же сделать переключение табов на CSS? Как мы помним, CSS и HTML являются чисто описательными языками. якорь заставляет браузер найти место в документе, содержащее якорь, и прокрутить страницу до него.
Также мы вспоминаем, что CSS позволяет описывать контейнеры, которые по ширине и/или высоте меньше, чем содержимое в контейнере. А что происходит с содержимым, выходящим за границы контейнера? Если у контейнера установлен аттрибут overflow: hidden то такое содержимое не отображается. Получается маленькое «окно», через которое нам видна часть большего региона.

Эти два факта позволяют организовать вкладочный интерфейс. В заголовках вкладок мы расположим ссылки на якори. А сами якори расположим на содержимом вкладок. При этом блок, внутри которого находится содержимое вкладок («окно»), ограничим в размерах так, чтобы одновременно через него была видна только одна вкладка. Работать это будет следующим образом: когда мы нажимаем на ссылку в заголовке вкладки, браузеру нужно показать нам соответтсвующий ярлык. И он будет прокручивать вкладки так, чтобы запрашиваемый якорь оказался в «окне».

HTML код для вкладок будет выглядеть следующим образом:

Каждая вкладка должна быть представлена уникальным идентификатором-якорем. В этом коде мы видим якори tab1-1, tab1-2, tab1-3, tab1-4, tab1-5. Когда вы добавляете на свой сайт новые вкладки, не забывайте давать им новые названия якорей.

CSS довольно прост. Сначала задаем базовые параметры внешнего вида:
Самое важное здесь заключается в установке значения overflow: hidden.
Горизонтальный список вкладок (вместо вертикального) формируется при помощи float: left.

Кстати, во фреймворках для отображения графического интерфейса виджет, формирующий вкладки, обычно называется notebook. Поэтому CSS-класс для нашей панели вкладок я тоже назвал notebook.

Затем придадим нашим вкладкам привычный вид:
В этом фрагменте интерес представляет то, как формируется обводка заголовков вкладок. Для каждой ссылки мы включаем отображение левой и верхней границы. Т.к. ссылки состыковываются вплотную друг к другу, у нас получается правильная обводка каждой ссылки. Но для последней ссылки нам надо закрыть дыру с правой стороны, поэтому при помощи селектора li:last-child мы выбираем последнюю ссылку и включаем у ней правую границу. Для профи это всё очевидно, но для новичков, не очень хорошо знакомых с селекторами, будет полезно разобраться в этом примере.

Также мы тут задаём внешний вид текста этих ссылок — шрифт, размер и т.п.

Ну и наконец задаем фиксированные размеры для вкладок и для контейнера вкладок, что в итоге и даст нам возможность прокрутки:
Обратите внимание: в предыдущих правилах CSS я использовал имя класса notebook, а в правиле, задающем размеры — идентификатор notebook1. Дело в том, что правила для класса notebook относятся к любой панели вкладок, а правила для указания размеров — «к вот этой конкретной» панели. У вас в одном документе может использоваться несколько панелей с вкладками, и для каждой панели вы, вероятно, захотите указать собственные размеры. В то время как остальные правила CSS остаются для них общими.

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

С другой стороны, как я уже выше отметил, если содержимое страницы не умещается на один экран, страница будет дергаться при переключении вкладок. Если вы делаете что-то типа веб-приложения, в котором возможность прокрутки страницы вообще не предполагается, то такой способ вам вполне подойдёт. Если у вас вкладки расположены в нижней части страницы (например, в футере под содержимым статей блога), то тоже всё нормально — дергания не будет, т.к. дальше прокручивать страницу некуда.

Также к недостаткам переключения вкладок overflow-способом можно отнести невозможность «правильным образом» сделать выделение заголовка текущей вкладки. Как вы заметили, в примерах выше все табы выглядят одинаково, независимо от того, какая вкладка открыта. Под правильным способом я подразумеваю способ, которые делается через CSS, без необходимости добавлять дополнительные элементы в html-код.

Тем не менее, существует хоть и «неправильный», но вполне рабочий способ добиться визуальной индикации текущей вкладки. У этого способа есть только одно ограничение: точная ширина заголовков вкладок должна быть нам известна заранее.

Посмотрим — что у нас изменяется при переключении вкладок? Изменяется только видимая область в прокручиваемом «окне». Значит, у нас единственный выход: элементы оформления, показывающие активную вкладку, должны быть привязаны к содержимому вкладки.

Возьмём панель с 4-мя вкладками. В начало содержимого каждой вкладки добавим div, содержащий 4 тега p. (Тегов должно быть по числу вкладок. Если у вас будет 5 вкладок, ставьте по 5 тегов p.)
Эти теги p мы вытянем в горизонтальную линию, и они будут служить границей, отделяющей заголовки вкладок от содержимого вкладок. Т.к. в таком случае граница не непрерывна, а состоит из отдельных сегментов, мы можем влиять на оформление этих сегментов из CSS.

Пишем CSS. Сначала часть, привязанная к классу notebook (т.е. общая для любых панелей вкладок):
Думаю, этот код понятен. Размещаем теги p в линию, задаем им высоту в 1 пиксель и серый цвет фона (такой же, как у границ вкладок).

Это еще не всё, что относится к классу notebook. Вот самая интересная часть магии:
Опять же, если вы плохо знакомы с селекторами CSS, вам стоит разобраться, что тут происходит. До этого в правилах CSS мы задали серый цвет фона для p. В этом коде мы настройки фона выборочно отключаем обратно.

Селектор выбирает первую вкладку на панели вкладок. Затем продолжение этого селектора выбирает первый тег p в нашем блоке, служащем границей. Аналогично следующая строка выбирает второй сегмент границы на второй вкладке. Затем третий сегмент границы на третьей вкладке. Таких строк нужно в CSS добавить столько, сколько максимально у вас предполагается вкладок в пределах одного набора вкладок.

Теперь допишем стили, специфичные для конкретной панели:
Во-первых, мы отключаем показ верхней границы для контейнера вкладок — border-top: none. Вместо этого у нас будет наша граница из отдельных сегментов.

Затем мы задаём размеры панели вкладок, ширину заголовков вкладок и сегментов границы. Важно, чтобы ширина вкладок и сегментов совпадала.

Свойство box-sizing: border-box указывает, что реальные размеры нужно считать с учетом ширины отступов и границ. (Без этого свойства браузер добавляет размеры отступов и границ к заданной в CSS ширине и высоте блоков.)

Исходный код CSS целиком:

Можешь почитать и вот эту статейку "particles-js"