Разное

Табы на css: Табы на CSS? Можно, но…

07.06.2018

Табы на CSS? Можно, но…

После просмотра курсовой работы коллеги по цеху, где использовались табы на инпутах, захотелось мне рассказать о четырех методах создания вкладок (далее табов) на чистеньком и таком ванильном CSS. Но что-то пошло не так, и вся статья превратилась в исследование метода организации табов, используя target.

Псевдокласс target

В CSS target — это псевдокласс, который призван связать URL (адресную строку браузера) и элемент с указанным идентификатором на странице. Для указания на элемент используется хэштег в конце URL. Элемент, на который указывает хэштег, называется целевым элементом.

Если в URL появляется хэштег, совпадающий со значением идентификатора какого-нибудь элемента на странице, то происходит скролл до него.

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

Для примера, допустим, что имеется следующая разметка:

. ..
<h2>Введение</h2>
<p>Здесь находится какой-то текст</p>
...

Пользователь получает от коллеги ссылку, содержащую хэштег (то, что находится после решетки #), и кликает по ней:

https://website.com/articles/target-for-you#introduction

В этот момент браузер загружает страницу и сразу же переходит к началу целевого элемента. Согласитесь, что это довольно удобно.

Однако, наиболее интересным использованием этого пседокласса является возможность применения стилей к целевому элементу. Например, можно поменять цвет текста у заголовка, который является целевым элементом:

.heading:target {
  color: #ffff99;
}

Также, с помощью селекторов в CSS можно управлять соседними, дочерними и родственными элементами:

.heading:target + p {
  font-size: 2.4rem;
}

Разумеется, что класс здесь задан лишь для примера — никто не запрещает обращаться сразу к селектору по тегу:

h2:target {
  color: #ffff99;
}

Более подробную информацию о псевдоклассе target можно получить из этих материалов:

Первоначальный осмотр

Я думаю, ни для кого не секрет, как устроены табы. Но всё же напомню суть: пользователь кликает на заголовок вкладки и чудесным образом отображается её содержимое.

Раньше, да и сейчас, такое делали с помощью JavaScript. К сожалению, в конце статьи вы поймете, почему решения на JavaScript куда интереснее с точки зрения удобства использования, чем решения на CSS. От этого никуда не деться, а знать нужно.

Типичный виджет табов выглядит примерно так:

Все ясно и технически очень просто. Но перед тем, как приступить к реализации, я хочу рассказать почему написана эта статья.

Проблема в том, что меня не устраивают существующие решения. Знакомо? Да, но тут всё несколько сложнее, так как в CSS нет решений, которые можно копипастить из проекта в проект.

Так вот, что мне нужно от табов:

  • Максимальная адаптируемость под проекты. Имеется в виду, что, делая copy-paste jade- и less-файла я буду счастлив.
  • Максимальная отвязка HTML разметки от CSS. То есть, чтобы добавить новые вкладки — я не должен лезть в CSS и, основываясь на разметке, что-то там добавлять.
  • Указывать вкладку, отображаемую по умолчанию, через класс.
  • Нормальная структура разметки.
  • Отсутствие полного абсолютного позиционирования у табов и переключателей.
  • Велосипед — что может быть лучше своего велосипеда?
  • Отсутствие JavaScript.

Однако, перед тем как приступить к решению, нужно перечислить все методики организации табов на CSS:

  • Псевдокласс checked у элемента input;
  • Псевдокласс target;
  • Псевдокласс focus;
  • Псевдокласс hover;

Варианты с hover и focus мне не нравятся. Их в статье я больше упоминать не буду.

Реализация

Начнем, с решения проблемы, которую нам подсовывает использование псевдокласса target — скролла до целевого элемента.

Изначально, в статье была история о том, как я пришел к решению, но в итоге всё таки её здесь не будет. Не интересное это занятие — рассказывать то, что в итоге оказывается логичным и довольно простым.

Для того, чтобы избавиться от скролла, необходимо целевому элементу прописать свойство display

и присвоить ему значение none. В теории мы имеем, что элемент, по сути своей, есть в DOM и скролл к нему должен срабатывать, но так как у нас имеется свойство display, то вычислить координаты элемента невозможно. Не знаю, так ли это на самом деле, но это работает.

Поэтому, мы будем ссылаться не на саму вкладку, а на дополнительный пустой блок, находящийся прямо перед ней. Хитро? Я тоже так подумал, когда потратил два часа своей жизни на поиск решения.

Листинг HTML

Я привел лишь две вкладки из трех. Думаю, что структура предельна ясна и не требует объяснения.

<div>
  <!-- Block for controllers -->
  <div>
    <a href="#tab-1-1">Первая вкладка</a>
    <a href="#tab-1-2">Вторая вкладка</a>
    <a href="#tab-1-3">Третья вкладка</a>
  </div>

  <!-- Tabs -->
  <div></div>
  <div>.
 
 ..</div>
  <div></div>
  <div>...</div>
</div>

Класс -default указывает таб, отображающийся по умолчанию. Блок, предшествующий блоку с классом item, является его управляющим блоком.

Листинг CSS

К сожалению, CSS не такой симпатичный, как хотелось бы, но об этом мы подробнее будем говорить позже. Все комментарию к коду даны в комментариях 🙂

.tabs-widget > .content {
  position: relative;
}

// Скрываем пустой блок, предназначенный для отмены скролла
.tabs-widget > .content > .scroller {
  display: none;
}

// Следующий за целевым элементов таб отображаем поверх первого таба
.tabs-widget > .content > .scroller:target + .item {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

// Первый таб всегда должен иметь относительное позиционирование
.tabs-widget > .content > .scroller:target + .item.-default {
  position: relative;
}

// Стили табов
// Обратите внимание на наличие указанной максимальной высоты таба, иначе
// большие табы будут вылезать за пределы размеров таба по умолчанию,
// если тот меньше них
.
 
 tabs-widget > .content > .item {
  background-color: #ffffff;
  color: #333333;
  padding: 20px;
  display: none;
  max-height: 384px;
  overflow-y: auto;
}

// Всегда отображаем первый таб
.tabs-widget > .content > .item.-default {
  display: block;
  z-index: 1;
}

Замечательно, вроде как всё даже работает:

Посмотрите пример на CodePen.

Заметьте, я специально определил вторую вкладку отображаемой по умолчанию. Как пользователь поймет, что сейчас активна она? Об этом позже.

Существуют различные варианты реализации этой методики. Но сразу скажу, что во многих из них есть жесткая связь между разметкой и CSS.

Другие реализации

Анимация

Перед тем, как опубликовать статью, я решил выспаться и с утра оценить все то, что уже написано. Однако, меня ждала западня, устроенная пабликом Webtackles — веб-разработка и дизайн. Эти ребята опубликовали табы на JavaScript. Понимаете? Прямо за день до того, как я решил выложить эту статью. Возмутительно!

В комментариях пробежала нотка анимации табов. И тут я решил, что мне нужно добавить анимацию своим табам.

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

Возможно, мне уже лень думать, но ничего лучше этого я придумать так и не смог:

@keyframes tabs {
  0% {
    color: #ffffff;
  }
  100% {
    color: #333333;
  }
}

.tabs-widget > .content > .scroller:target + .item {
  animation: tabs 1s;
  ...
}

Конец радости

На этом радостные выкрики можно заглушить, ибо проблемы этого метода в том, что:

  • Все переходы по табам отражаются в истории.
  • Первый таб всегда отображается.
  • Довольно проблематично подобрать анимацию из-за того, что первый таб всегда отображается.
  • Ужасная реализация подсветки активных табов.

Зато таких проблем лишен метод организации табов, использующий элементы input и псевдокласс :checked. Разумеется, кроме последнего пункта. Например, организация логики переключения табов там делается так:

// Скрываем input
.tabs-widget > .content > input {
  display: none;
}

// Скрываем все вкладки, кроме той, что активна
.tabs-widget > .content > input:not(:checked) + .item {
  display: none;
}

Проблема с выделением активной вкладки носит серьёзный характер. Но тут есть целых четыре решения:

  • Добавить ещё один целевой элемент, но уже перед каждой ссылкой — бред.
  • Плоская структура виджета и полная привязка CSS к структуре — не хочу.
  • Почти плоская структура с привязкой CSS к структуре — не хочу.
  • Абсолютное позиционирование вкладок — нет, там будет ужас.

В этом случае мы получим говнокод, который будем вам сниться каждый день и напоминать о своей никчомности.

Поддержка браузерами

Заходим на Can I Use и видим замечательную картину касательно псевдоклассов target и first-child.

Тестируем с помощью BrowserStack на работоспособность в IE9 и радуемся, что все отображается корректно.

Когда применять табы на CSS?

Довольно интересный вопрос, учитывая то, что вы прочитали почти всю статью перед этим о том, как сделать табы на CSS. Попробую ответить на него.

Табы на CSS стоит применять тогда, когда вам не нужна поддержка IE ниже 9 версии и у вас есть желание этого. Во всех остальных случаях решением будет использование JavaScript.

Самая серьёзная часть статьи

Наверное, подводя итоги, хочется задать себе один единственный вопрос и попытаться ответить на него максимально честно: «Стоила ли игра свеч?».

И мой ответ на него — нет.

Понимаете, как ни крути, табы на target будут уступать табам на input. Проблема их в том, что:

  • Нужно как-то показывать контент первого таба — костыль.
  • Проблемы с анимацией из-за первого пункта — костыль.
  • Решение проблемы со скроллом до целевого элемента — костыль.

Сложно сказать что-то внятное. Не знаю. Я нашел много различных реализаций табов на CSS, и ни одна не удовлетворяет мои требованиям полностью. Я готов смириться с тем, что у меня не будут подсвечиваться активные табы, будет убогая реализация анимации, но ровно до тех пор, пока наш друг дизайнер не решит это сделать.

Если же ваш друг-дизайнер решил их подсвечивать, то у вас два выхода:

  • Воруете отсюда 4 Methods CSS3 Tabbed Content табы (какие нравятся) и расстраиваетесь жесткой связи структуры верстки и CSS.
  • Используете JS.

Уточню, что в статье «4 Methods CSS3 Tabbed Content» есть привязка логики переключения табов и их разметки, что не соответствует моим требованиям. Логика с добавлением новых табов через CSS хороша там, где вкладки могут долго не меняться и/или не создаются автоматически.

Я думаю, что JavaScript в этом случае самое короткое и рациональное решение. И да, этой строчкой я признаю, что табы на CSS — это некий костыль. Но костылем они не являются до тех пор, пока можно не подсвечивать активный таб и нет сложной анимации переходов.

В любом случае, если у вас на сайте уже используется JavaScript для каких-то интерфейсов (меню, аккордеоны и т.д.), то я призываю вас использовать табы на JavaScript, потому что они:

  • Проще в обслуживании.
  • Гибче любых табов на CSS.
  • Не плодят лишней разметки.
  • Используют более семантически верную разметку.
  • Лишены недостатков табов на CSS.

И, напоследок, задам два вопроса, которые будут волновать неравнодушного читателя после прочтения этой статьи:

  • А какие табы используете вы?
  • Что вы думаете по поводу табов на CSS?

Спасибо за то, что дочитали до конца.

Вкладки (табы) на чистом CSS — Верстка

Обнаружил в интернете очень простой способ создания табов (сменяющих друг друга блоков с контентом). Обычно подобные вещи делаются с помощью javascript, либо сейчас еще экспериментируют с CSS3. Данный пример обходится без этого.

HTML


<ul>
	<li><a href="#one">1</a></li>
	<li><a href="#two">2</a></li>
	<li><a href="#three">3</a></li>
	<li><a href="#four">4</a></li>
	<li><a href="#five">5</a></li>
</ul>
<div>
<ul>
	<li>Содержимое 1-й вкладки</li>
	<li>Содержимое 2-й вкладки</li>
	<li>Содержимое 3-й вкладки</li>
	<li>Содержимое 4-й вкладки</li>
	<li>Содержимое 5-й вкладки</li>
</ul>
</div>

CSS


.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content ul {
    list-style: none
    /* Эти 3 линии для Opera */
    height: 320px;
    overflow: scroll;
    overflow-y: hidden;
}
.
 
 tabs-content ul li {
    width:960px;
    height:300px;
}

Ссылки в навигации указывают на соответствующие id блоков с контентом. Этим блокам указаны ширина и высота равные блоку tabs-content. По умолчанию, при нажатии, браузер ищет в контенте блок с id указанным в ссылке. А т.к. отображаться может какой-либо один блок, это заставляет показывать актуальный.

Работает в Firefox, Opera (для старых версий нужно немного дополнить css), Safari, Google Chrome, IE6+.

Живой пример

0

У Криса Койера также есть свои варианты CSS табов

Ссылки

ВКонтакте

Twitter

Facebook

Одноклассники

Linkedin

Telegram

WhatsApp

CSS HTML

🚀 Адаптивные табы на чистом CSS заказать

/* Базовый контейнер табов */

. tabs {

min-width: 320px;

max-width: 800px;

padding: 0px;

margin: 0 auto;

}

/* стили секций с содержанием */

section {

display: none;

padding: 15px;

background: #fff;

border: 1px solid #ddd;

}

.tabs input {

display: none;

}

/* стили вкладок (табов) */

.tabs label {

display: inline-block;

margin: 0 0 -1px;

padding: 15px 25px;

font-weight: 600;

text-align: center;

color: #aaa;

border: 1px solid #ddd;

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: 1px solid #ddd;

border-top: 1px solid #009933;

border-bottom: 1px solid #fff;

background: #fff;

}

/* активация секций с помощью переключателя :checked */

#tab1:checked ~ #content1,

#tab2:checked ~ #content2,

#tab3:checked ~ #content3,

#tab4:checked ~ #content4 {

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;

}

}

Как сделать вкладки на чистом CSS

Вы здесь: Главная — CSS — CSS Основы — Как сделать вкладки на чистом CSS

На этом уроке мы научимся делать простые вкладки на чистом CSS и никакого JavaScript. В ряде случаев этого решения вполне достаточно, ограничиваясь возможностями только CSS стилей.

HTML код

Сначала создадим обертку для вкладок с классом wrap. Затем блок для вкладок tabs, навигацию для переключения вкладок tabs__items, вкладки-ссылки tabs__item. В адресах ссылок пропишем названия-якоря и точно такие же названия укажем в идентификаторах у текстовых блоков, таким образом связав их между собой. Далее создадим три блока с содержимым табов tab__box.

<div>
  <div>
    <nav>
      <a href="#tablink_01"><span>Вкладка #1</span></a>
      <a href="#tablink_02"><span>Вкладка #2</span></a>
      <a href="#tablink_03"><span>Вкладка #3</span></a>
    </nav>
    <div>
      <div>
        рыба-текст
      </div>
      <div>
        рыба-текст
      </div>
      <div>
        рыба-текст
      </div>
    </div>
  </div>
</div>

CSS код

Сделаем для обертки отступ сверху, ограничим ее по ширине и расположим по середине.

.wrap {
    padding: 40px 0;
    max-width: 900px;
    margin: 0 auto;
}

Сделаем оболочку для табов флекс-контейнером, для построения табов в один ряд.

.tabs__items {
    display: flex;
}

Поделим поровну пространство для табов и так же сделаем их контейнером для ссылок.

.tabs__item {
    flex: 0 1 33.333%; // управление размерами вкладок
    height: 50px; // высота вкладок
    display: flex;
    justify-content: center; // центрирование по горизонтали
    align-items: center; // центрирование по вертикали
    text-transform: uppercase; // перевод в верхний регистр
    color: #fff; // цвет ссылок
    text-decoration: none; // убираем подчеркивание ссылок
}

Изначально все вкладки нужно спрятать.

.tab__box {
    position: relative; // относительное позиционирование
    padding: 20px; // внутренние отступы
    font-size: 18px;
    line-height: 24px;
    display: none; // вкладки скрыты
}

Как добиться, чтобы при нажатии на вкладку, показалось ее содержимое? Поможет нам псевдо-класс :target, который при клике по цели, применит заданный стиль к элементу с якорем.

.tab__box:target {
    display: block; // покажет содержимое при клике
}

Мы хотим, чтобы при клике, сам таб и бокс с контентом меняли цвет фона и здесь без псевдоэлемента никак не обойтись. Создадим для вкладок с контентом пустые блоки при помощи псевдоэлемент :before.

.tab__box:before {
    content: "";
    height: 50px;
    width: 33.333%;
    position: absolute;
    top: -50px;
}

Покрасим все блоки в два разных цвета, обратившись к каждому через псевдокласс :nth-child.

.tab__box:nth-child(1) {
    background-color: #3fc1c9;
}
.tab__box:nth-child(1):before {
    background-color: #3fc1c9;
    left: 0;
}
.tab__box:nth-child(2) {
    background-color: #fc5185;
}
.tab__box:nth-child(2):before {
    background-color: #fc5185;
    left: 33.333%;
}
.tab__box:nth-child(3) {
    background-color: #3fc1c9;
}
.tab__box:nth-child(3):before {
    background-color: #3fc1c9;
    right: 0;
}

Цветной фон перекрывает меню навигации, поэтому переместим надпись на слой выше.

.tabs__item span {
    position: relative;
    z-index: 2;
}
  • Создано 27.03.2020 10:32:20
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

Создание вкладок при помощи HTML и CSS

46

199

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.

При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.

Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.

Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:


Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление так же можно легко изменить.

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

HTML код:

<div class="tabs">
    <input type="radio" name="inset" value="" id="tab_1" checked>
    <label for="tab_1">Вкладка №1</label>

    <

input type="radio" name="inset" value="" id="tab_2">
    <label for="tab_2">Вкладка №2</label>

    <

input type="radio" name="inset" value="" id="tab_3">
    <label for="tab_3">Вкладка №3</label>

    <

input type="radio" name="inset" value="" id="tab_4">
    <label for="tab_4">Вкладка №4</label>

    <

div id="txt_1">
        <p>Произвольное содержимое. ..</p>
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
    </div>
    <div id="txt_2">
        <p>Вторая вкладка</p>
    </div>
    <div id="txt_3">
        <p>Размеры содержимого вкладок</p>
        <p>могут отличаться по высоте!</p>
    </div>
    <div id="txt_4">
        <img src="image/logo.png" width="533" height="77" alt="Лого">
    </div>
</div>

Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами <head> и </head> добавьте следующие стили оформления:

HTML код:

<style type="text/css">
.tabs { width: 100%; padding: 0px; margin: 0 auto; }
.tabs>input { display: none; }
.tabs>div {
    display: none;
    padding: 12px;
    border: 1px solid #C0C0C0;
    background: #FFFFFF;
}
. tabs>label {
    display: inline-block;
    padding: 7px;
    margin: 0 -5px -1px 0;
    text-align: center;
    color: #666666;
    border: 1px solid #C0C0C0;
    background: #E0E0E0;
    cursor: pointer;
}
.tabs>input:checked + label {
    color: #000000;
    border: 1px solid #C0C0C0;
    border-bottom: 1px solid #FFFFFF;
    background: #FFFFFF;
}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 { display: block; }
</style>

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

Дата создания: 17:14:04 04.12.2016 г.

Посещений: 39351 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Красивые анимированные вкладки на CSS