Товаров: 0 (0р.)

Css табы: Табы (вкладки) для сайта на CSS и JavaScript – 3 способа

Содержание

Табы на 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 без использования скриптов

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

Итак, начнем

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

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

0d5814e876

Итак, приступим.

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

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

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

<input type=«radio» name=«tabs» id=«tab-first» checked >

3. Добавляем их название через label

<label for=«tab-first»>

4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже непосредственно контент, который нам нужно выводить. В моем случае это три последних товара и три лучших товара.

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

Итоговый HTML наших будущих табов

<div>
    <!-- Кнопка-переключатель и название первого таба -->
    <input type="radio" name="tabs" checked >
    <label for="tab-first">
        <p>Хиты продаж</p>
    </label>
    <!-- Кнопка-переключатель и название второго таба -->
    <input type="radio" name="tabs">
    <label for="tab-second">
        <p>Последнее</p>
    </label>
    <!-- Вывод контента наших табов -->
    <div>
        <p>
         <!-- Тут вы размещаете контент под таб№1 -->
        </p>
    </div> <!-- #tab-content-1 -->
    <div>
    <p><!-- Тут вы размещаете контент под таб№2 --></p>
    </div> <!-- #tab-content-2 -->
</div>

На этом мы закончили с написанием нашего 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[type=radio] {
    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 [id^="tab"]: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

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

#tab-first:checked ~ #tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″, если tab-first имеет статус checked.

Делаем наши табы адаптивными

@media (min-width: 768px) {
    .tabs p {
        padding: 5px;
        margin-right: 10px;
    }
    .tabs {
    max-width: 750px;
    margin: 50px auto;
    }
}

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

Делаем адаптивные табы без javascript и грязных хаков

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

.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, или на своих проектах. Буду рад увидеть и другие предложения решений данной проблемы в комментариях.

comments powered by HyperComments

Табы на CSS3

Всем доброе утро)) Ну у кого не утро. того с добрым днем, вечером или ночью! Но у меня утро, и этим прекрасным утром я хочу поделиться с Вами таким простым, но очень нужным элементом, как табы. Табы служат для организации подачи информации на странице. Нужно сэкономить место? Табы в помощь. Сориентировать посетителя в порядке изучения информации? И тут тоже табы пригодятся кстати.

Тем более я хочу с Вами поделиться табами чисто на CSS3, без всяких js скриптов. Это намного проще и не нужно грузить кучу ненужного кода. Сейчас любой современный браузер поддерживает почти все параметры и атрибуты CSS3, так что смело можете использовать эти css3/html вкладки для своего сайта.

Я обычно использую табы в интернет магазинах. Как вижу новую реализацию табов, сразу представляю, как это будет смотреться на странице товара в интернет магазине. Если не изменять дизайн плагина, который я выкладываю сейчас, то он подойдет почти для любого минималистичного интерфейса интернет магазина, но и поменять цвет вкладок — это не сложная задача.

Установка CSS3 табов на сайт:

1. Скачайте архив, нажав на кнопку «Скачать»

2. Разархивируйте к себе на сайт

3. Подключаем css файл

Там, где вы хотите показывать табы между тегами <head> и </head> вставьте следующий код:


<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />

4. А в разделе <body> вот такой html код:


<section>
<input type="radio" name="tab" checked="checked" />
<input type="radio" name="tab" />
<input type="radio" name="tab" />
<label for="tab_1">Tab One</label>
<label for="tab_2">Tab Two</label>
<label for="tab_3">Tab Three</label>
<div></div>
<div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum, diam vel mollis laoreet, dolor dolor fringilla ligula, at condimentum velit dui a arcu. Integer dapibus sapien eu tellus ullamcorper adipiscing. Aliquam congue interdum venenatis. Sed ornare pulvinar commodo. Vivamus faucibus velit enim. Nulla at lorem felis, quis condimentum felis. Nulla luctus consequat tellus at faucibus. Donec et felis at lacus lobortis luctus. In quis nisl metus. Aenean ultricies augue in sem elementum consequat. Vestibulum convallis sollicitudin venenatis. Aliquam et enim lacus.</p>
<p>Integer sapien erat, convallis pulvinar tempor sit amet, placerat in metus. Mauris volutpat porttitor magna euismod sodales. Ut quis consequat augue. Curabitur ut neque sed purus accumsan feugiat sed sit amet lacus. Donec blandit scelerisque metus, nec consectetur odio varius et. Nulla nibh nibh, pellentesque et mattis eget, rutrum porttitor nulla. Aliquam pharetra augue quis nisl luctus sit amet convallis augue consequat.</p>
</div>
<div>
<p>Integer sapien erat, convallis pulvinar tempor sit amet, placerat in metus. Mauris volutpat porttitor magna euismod sodales. Ut quis consequat augue. Curabitur ut neque sed purus accumsan feugiat sed sit amet lacus. Donec blandit scelerisque metus, nec consectetur odio varius et. Nulla nibh nibh, pellentesque et mattis eget, rutrum porttitor nulla. Aliquam pharetra augue quis nisl luctus sit amet convallis augue consequat.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dictum, sapien sed tincidunt condimentum, turpis purus sollicitudin urna, eget ullamcorper quam libero mattis odio. Nulla eget augue est, vitae egestas nibh. Morbi eu neque sed ante gravida vestibulum et a risus. Nullam ultrices eleifend augue id lacinia. Cras at sapien urna, sit amet pharetra neque. Praesent non sem eu justo malesuada vestibulum id ac nisl. Cras accumsan velit eget quam dictum commodo. Donec iaculis ipsum eu arcu aliquet pellentesque. Donec non velit nec arcu auctor egestas. Etiam consectetur tellus sed eros convallis placerat.</p>
</div>
<div>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean dictum, sapien sed tincidunt condimentum, turpis purus sollicitudin urna, eget ullamcorper quam libero mattis odio. Nulla eget augue est, vitae egestas nibh. Morbi eu neque sed ante gravida vestibulum et a risus. Nullam ultrices eleifend augue id lacinia. Cras at sapien urna, sit amet pharetra neque. Praesent non sem eu justo malesuada vestibulum id ac nisl. Cras accumsan velit eget quam dictum commodo. Donec iaculis ipsum eu arcu aliquet pellentesque. Donec non velit nec arcu auctor egestas. Etiam consectetur tellus sed eros convallis placerat.</p>
<p>Vivamus imperdiet varius urna, sed ullamcorper enim interdum ac. Quisque nibh risus, auctor quis ultricies non, ultricies ut purus. Mauris vitae augue erat. Praesent blandit diam at est laoreet suscipit. Vivamus mauris quam, gravida ultricies sodales sit amet, commodo a eros. Vestibulum varius sollicitudin nisl, vitae sollicitudin dolor aliquet in. Duis et nulla mi. Morbi sit amet mi nisl. Cras eu augue libero. Cras laoreet ligula in augue tempus accumsan.</p>
</div>
</div>
</section>

5. Табы установлены!

Теперь просто меняете в <label> заголовки, а в tab_c1, tab_c2, tab_c3 информацию, выводимую при нажатии на соответствующую вкладку

На этом все! Успехов в работе, хорошего дня!

Помогла статья? Угости чашечкой кофе =)

Адаптивные табы на чистом 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;

}

}

Табы с помощью CSS3

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


Смотреть ДемоДля создания табов мы будем использоваться тег input и CSS селектером :checked. Впервую очередь нам понадобиться создать разметку страницы на HTML
<section>
<input type="radio" name="tab" checked="checked" />
<input type="radio" name="tab" />
<input type="radio" name="tab" />
<label for="tab_1">Tab One</label>
<label for="tab_2">Tab Two</label>
<label for="tab_3">Tab Three</label>
<div></div>

<div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
</div>
</section>

Нажатие на радио-боксы будет активировать соответствующие табы. Первому input выставляем атрибут checked=»checked», это позволит  сделать первый таб по умолчанию открытым. Сами радио-боксы мы спрячем, а для нажатия на них нам послужит тег label. В блоке .tabs_cont у нас будет находятся блоки с табами в которых и разместится контент (текст, картинки и т.д.) . Пока все просто.

Переходим к CSS стилям

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 &amp;gt; 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

Я уже достаточно давно занимаюсь разработкой сайтов и очень много раз встречал так называемые «табы» на чистом JavaScript или jQuery и ни разу не видел на голом CSS. Как оказывается и такое бывает.

Возможно, они не такие красивые, так как нет дополнительных эффектов переключения, как это сделано в том же jQuery.tools, но они, черт подери, ничего не весят для вашего посетителя. Для всех информационных сайтов или для мобильных интерфейсов – это самое оно.

Сразу, чтобы затравить душу, пример:

Пример

Реализовано все предельно просто. HTML-код выглядит так:

<ul>
  <li><a href="#frame1">1</a></li>
  <li><a href="#frame2">2</a></li>
  <li><a href="#frame3">3</a></li>
  <li><a href="#frame4">4</a></li>
  <li><a href="#frame5">5</a></li>
</ul>
<div>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</div>

CSS-код:

<style>
.tabs {
  font-size: 0.75em;
  line-height: 30px;
  list-style: none;
  overflow: hidden;
  height: 30px;
}
.tabs li {
  float: left;
}
.tabs a {
  float: left;
  background: #eee;
  padding: 0 15px;
  text-decoration: none;
  height: 30px;
}
.tabs a:hover {
  background: #ddd;
}
.tabs-content {
  width: 100%;
  height: 300px;
  overflow: hidden;
  text-align: center;
  line-height: 300px;
  font-size: 6em;
}
.tabs-content section {
  width: 960px;
  height: 300px;
}
.tabs-content #frame1   { background: red; }
.tabs-content #frame2   { background: blue; }
.tabs-content #frame3 { background: aqua; }
.tabs-content #frame4  { background: green; }
.tabs-content #frame5  { background: yellow; }
</style>

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

Этот способ позволяет за минимальные затраты на производительность получить эффект динамики на сайта.

Просто и красиво!

Рассказать в соц. сетях

Как сделать адаптивные табы (вкладки) на css без использования скриптов

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

Итак, начнем

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

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

0d5814e876

Итак, приступим.

HTML-код для табов с использованием css3 по пунктам

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

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

3. Добавляем их название через метку

4. Под кнопками, которые мы с Вами сделали в пунктах 1-3, мы добавляем уже контент, который нам нужно выводить.В моем случае это три последних товара и три лучших товара.

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

Итоговый HTML наших будущих табов

На этом мы закончили с написанием нашего html.Согласитесь, ничего сложного тут не было. Итак, идем дальше.

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

Теперь самое интересное и сложное. Нам нужно наши табы сделать табами, которые будут переключаться при клике

🙂

Так как у нас будет два таба, то нам нужно назначить им такую ​​ширину, чтобы они помещались на экран и не вылазили за его черту. Для этого мы прописываем ширину 50%. Если у вас будет другое число табов, то и ширину рассчитывайте отталкиваясь от их числа.

Также обратите внимание, что по умолчанию, мы делаем наши кнопки-переключатели невидимыми

 .tabs {
    максимальная ширина: 90%;
    float: нет;
    стиль списка: нет;
    отступ: 0;
    маржа: 75 пикселей автоматически;
    нижняя граница: сплошной 4px #ccc;
}
.tabs: after {
    содержание: '';
    дисплей: таблица;
    ясно: оба;
}
.tabs input [type = radio] {
    дисплей: нет;
}
.tabs label p {
    отступ: 5 пикселей;
    поле справа: 0;
}
.tabs label {
    дисплей: блок;
    плыть налево;
    ширина: 50%;
    цвет: #ccc;
    размер шрифта: 30 пикселей;
    font-weight: нормальный;
    текстовое оформление: нет;
    выравнивание текста: центр;
    высота строки: 2;
    курсор: указатель;
    box-shadow: вставка 0 4px #ccc;
    нижняя граница: сплошной 4px #ccc;
    -webkit-transition: все 0,5 с; / * Safari от 3.1 до 6.0 * /
    переход: все 0,5 с;
}
.tabs label span {
    дисплей: нет;
}
.= "tab"]: отмечено + label {
    фон: #FFF;
    box-shadow: вставка 0 4px # 3498db;
    нижняя граница: твердое тело 4px # 3498db;
    цвет: # 3498db;
}
# tab-first: проверено ~ # tab-content-1,
# tab-second: проверено ~ # tab-content-2
{
    дисплей: блок;
}

Строками выше мы добавляем особы стиль для активного таба с использованием : отмечено + ярлык

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

# tab-first: checked ~ # tab-content-1 — данная строка говорит о том, что нам нужно отображать контент, id = »tab-content-1 ″ , если tab-first имеет статус проверен.

Делаем наши табы адаптивными 

 @media (min-width: 768 пикселей) {
    .tabs p {
        отступ: 5 пикселей;
        поле справа: 10 пикселей;
    }
    .tabs {
    максимальная ширина: 750 пикселей;
    маржа: 50 пикселей автоматически;
    }
}

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

.

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

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

Псевдокласс цель

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

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

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

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

 ...
 
 Введение 
 

 Здесь находится какой-то текст 

...

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

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

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

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

  .heading: target {
  цвет: # ffff99;
}

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

  .heading: target + p {
  размер шрифта: 2,4 бэр;
}

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

  h2: target {
  цвет: # ffff99;
}

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

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

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

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

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

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

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

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

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

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

  • Псевдокласс проверено у элемента input ;
  • Псевдокласс цель ;
  • Псевдокласс фокус ;
  • Псевдокласс hover ;

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

Реализация

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

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

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

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

Листинг HTML

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

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

Листинг CSS

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

  .tabs-widget> .content {
  положение: относительное;
}

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

// Следующий за целевым элементов табаем поверх первого таба
.tabs-widget> .content> .scroller: target + .item {
  дисплей: блок;
  позиция: абсолютная;
  слева: 0;
  справа: 0;
  верх: 0;
  внизу: 0;
  z-индекс: 2;
}

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

// Стили табов
// Обратите внимание на наличие максимальной высоты таба, иначе
// большие табы будут вылезать за пределы размеров таба по умолчанию,
// если тот них меньше
.tabs-widget> .content> .item {
  цвет фона: #ffffff;
  цвет: # 333333;
  отступ: 20 пикселей;
  дисплей: нет;
  максимальная высота: 384 пикселей;
  переполнение-у: авто;
}

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

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

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

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

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

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

Анимация

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

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

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

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

  @keyframes tabs {
  0% {
    цвет: #ffffff;
  }
  100% {
    цвет: # 333333;
  }
}

.tabs-widget> .content> .scroller: target + .item {
  анимация: вкладки 1с;
  ...
}

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

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

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

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

  // Скрываем ввод
.tabs-widget> .content> input {
  дисплей: нет;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.

Делаем адаптивные табы без javascript и грязных хаков

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

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

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

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

Визуально должно получиться что-то подобное:

Пример табов

Пример табов

Перед тем как показать свой вариант табов без JS , я хотел бы рассказать о некоторых вариантах реализации, которые я нашёл в процессе решения этой задачи.

Вариант первый

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

Суть метода заключается в следующем:

В качестве заголовка (кнопок) используются ссылки, атрибуты href , которые прописываются id вкладки — div’а или любого другого элемента. Выделение активного вкладки происходит при помощи псевдокласса : target .

Работает это так:

Как вы могли заметить кое-какие проблемы с использованием данного метода:

  1. При нажатии на таб начинает скакать, так как браузер отправляет нас туда, куда ведёт текущая ссылка.Избежать конечно же этого можно, но без JS уже ни как.
  2. Активный заголовок таба не выделяется, это можно сделать, но крайне проблематично.
  3. Изначально активные табов нет (так как мы ещё не нажимали на ссылки) и нам приходится прибегать к хаку и делать активным третьим таб, первым таким способом не получится.
  4. Весьма спорная адаптивность: да, вкладки перестраиваются на новую строку при сужении экрана, а контент таба сужается вместе с ней, однако выглядит это не очень красиво.Эту проблему могут решить запросы, однако, что мы ходим не привязываться к количеству табов, на некоторых размерах дисплеев проблема останется.

Делаем оправданный вывод: этот метод нам не подходит так как не удовлетворяет большей части требований. Реализации ужасная и я не советовал бы её использовать.

Вариант второй

Этот метод создания табов без JavaScript уже более практичен, хотя так же имеет некоторые проблемы в применении.Суть метода в следующем: для заголовков вкладок используемые элементы , флажок и , метка , а при помощи псевдокласса : проверено и ещё одного div элемента мы можем показать контент только активную вкладки и скрыть все остальные:

.tab-wrapper input: checked + label + .tab-item {display: block;}

.tab-wrapper input: checked + label + .tab-item {display: block;}

Вот как это работает:

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

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

. В некоторых случаях вы знаете количество вкладок и объём контента внутри них. Но мы ищем универсальное решение, поэтому данный подход не применим в нашем случае.

Решение

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

В данном методе мы используем нынче модный flexbox для размещения вкладок и их контента.Вся прелесть flexbox тут заключается в том, что мы можем обозначить какие элементы отображать сначала, а какие в конце. Это можно сделать при помощи свойств заказ: 1; , которое по умолчанию равно нулю.

Адаптивность вкладок так же достигается за счёт свойства flex flex-grow: 1; , позволяет вкладкам растягиваться на всю ширину материала, за счет отображения разного количества табов. Так же мы можем размещать любой контент и разного объёма внутри каждой вкладки, это не будет влиять на контент после них.

Данный подход работает во всех современных браузерах, включая мобильных. Свойства используется только Flexbox, а он уже давно имеет широкую поддержку. В браузерах FireFox, Chrome, Safari и Opera было обнаружено каких-либо проблем с работой вкладок.

Я добавил немного стилей, чтобы вкладки выглядели поинтересней.

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

комментарии от HyperComments .

No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

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

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *