Табы на css – Адаптивные вкладки (табы) на CSS3

Более 50 красивых чистых CSS скриптов навигации с помощью закладок

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

bootstrap-tabs-x – расширенный плагин закладок, построенный на основе Bootstrap Tabs. Он позволяет выравнивать закладки, переворачивать заголовки, загружать контент через AJAX, а также включает в себя некоторые другие функции.

Демо

Pure CSS Tabs with Indicator – современная, но достаточно простая библиотека закладок, построенная без использования JavaScript. Это значит, что она быстрая и красивая.

Демо

Tabby – позволяет создавать простые закладки и выводить на них любой контент, включая видео. Данный скрипт предоставляет продвинутые настройки, поддерживает NPM и Bower.

Демо

Responsive Tabbed Navigation – современная удобная навигация, созданная с использованием JS и CSS, построенная с упором на мобильные устройства и поддерживающая горизонтальное и вертикальное расположение.

Демо

Toggler – плагин, написанный на чистом JavaScript, предназначен для создания элементов-переключателей, включая аккордеоны и закладки. Также он позволяет показывать/прятать любой элемент на странице.

Демо

Pure CSS Tabs – простой пример, созданный на основе CSS и JS. Несмотря на то, что он показывает «голые» закладки, вы сможете приукрасить их, изменив CSS стили.

Демо

Tabsy CSS – библиотека, написанная на CSS, предназначенная для создания простых элементов-переключателей, таких как закладки. Она не нуждается в дополнительных ресурсах и не требует использования JavaScript.

Демо

Tabbis.js – это простой, но продвинутый плагин. Используя его расширенные настройки, можно создавать вложенные закладки, а также определять функции обратного вызова.

Демо

Демо

Демо

Tabs using Pitaya – скрипт позволяют с легкостью создавать анимированное переключение между закладками. Но нужно подключить Pitaya, которая является библиотекой и увеличивает время загрузки.

Демо

jTabs – библиотека закладок, написанная на чистом JavaScript. Это означает, что она построена без jQuery и поддерживает несколько опций настройки.

Демо

Демо

Демо

tabs.js – это библиотека, написанная на JavaScript. Она адаптивная, поэтому закладки меняются на аккордеон на маленьких экранах.

Демо

WellTabber – ещё один простой JavaScript-плагин, похожий на Tabby. Он поддерживает различные варианты настройки закладок. Также он позволяет показывать стрелки навигации.

Демо

Демо

Демо

Демо

Material Design Tabs – скрипт закладок, построенный с использованием Vanilla JavaScript. Он простой в использовании, но и не поддерживает расширенные опции.

Демо

Анимированные CSS-Закладки – позволяет создавать простые легковесные закладки. В отличие от Tabby или WellTabber, скрипт не предлагает расширенных настроек.

Демо

Демо

Демо

Pure CSS Bootstrap Adaptive Tabs – система закладок построена исключительно с использованием CSS и без JavaScript. Уникальная функция, которую она предоставляет: закладки, не помещающиеся на экран, переносятся в выпадающий список.

Демо

Foldable Tab Bar – виджет закладок, написанный на чистом CSS3 (без использования JavaScript), как и другие плагины в этом списке. Его делают интересным закладки, имеющие красивый эффект сворачивания.

Демо

Демо

JavaScript Tabifier – продвинутый плагин закладок на JavaScript. Он позволяет устанавливать закладку по умолчанию, изменять закладку динамически и добавлять функции обратного вызова в события onLoad и onClick.

Демо

Tabtastic – это простой плагин для создания закладок с помощью CSS и JS. Он использует семантическую разметку, доступен для программ чтения экрана и поддерживает вложенные закладки на странице.

CSS3 & jQuery Folder Tabs – это руководство с доступным для скачивания исходным кодом рассказывает о создании закладок папок с помощью CSS3 и jQuery. Оно напоминает мне о закладках в Google Chrome.

Демо

Equal-width Navigation Tabs – пример кода, демонстрирующий использование чистого CSS для создания закладок навигации одинаковой ширины. Вы можете настроить отображение, но не дополнительные настройки.

Демо

Демо

Twitter Bootstrap Wizard – это плагин для создания установщика с закладками. Я заметил, что он позволяет создать только закладки, скрыв или удалив кнопки «Назад» и «Далее«.

Демо

Демо

Just Another CSS Tabs – прекрасно созданная структура закладок, построенная на чистом CSS, которая работает в современных браузерах. Но, в отличие от некоторых мощных плагинов, здесь нет расширенных настроек.

Демо

Responsive Accordion to Tabs – скрипт работает как аккордеон или как закладки в зависимости от ширины экрана. Он показывает закладки или аккордеон, если размер экрана слишком мал.

Демо

CardTabs – лёгкий плагин закладок, созданный на jQuery, который имеет несколько тем. Вы также можете создавать новые темы и устанавливать активную закладку динамически.

Демо

Демо

Minimal & Sexy Tabs – закладки, которые доступны в двух цветовых темах: светлой и тёмной. Скрипт построен на jQuery, поэтому не так легок, как некоторые упомянутые выше плагины.

Демо

Adaptive Tabs – не считая современного дизайна, пример не имеет особой функциональности, как некоторые продвинутые плагины.

Демо

Демо

Демо

jQuery Tabs – это простой плагин для создания закладок. Он построен на jQuery.

Демо

Данная публикация представляет собой перевод статьи «50+ Nice Clean CSS Tab-Based Navigation Scripts» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Табы на 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;
}

Более подробную информацию о псевдоклассе

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

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

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

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

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

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

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

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

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

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

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

Реализация

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

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

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

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

Листинг 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?

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

canonium.com

Вкладки (Табы) на одной странице на html/css

#tabs{

  overflow: hidden;

  width: 100%;

  margin: 0;

  padding: 0;

  list-style: none;

}

#tabs li{

  float: left;

  margin: 0 .5em 0 0;

}

#tabs a{

position: relative;

    background: #ddd;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

    background-image: -webkit-linear-gradient(top, #fff, #ddd);

    background-image: -moz-linear-gradient(top, #fff, #ddd);

    background-image: -ms-linear-gradient(top, #fff, #ddd);

    background-image: -o-linear-gradient(top, #fff, #ddd);

    background-image: linear-gradient(to bottom, #fff, #ddd);

    padding: .7em 1.5em;

    float: left;

    text-decoration: none;

    color: #25b7bf;

    text-shadow: 0 1px 0 rgba(255,255,255,.8);

    -webkit-border-radius: 5px 0 0 0;

    -moz-border-radius: 5px 0 0 0;

    border-radius: 5px 0 0 0;

    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);

    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);

    box-shadow: 0 2px 2px rgba(0,0,0,.4);

    font-size: 18px;

    font-weight: 700;

}

#tabs a:hover,

#tabs a:hover::after,

#tabs a:focus,

#tabs a:focus::after{

  background: #fff;

}

#tabs a:focus{

  outline: 0;

}

#tabs a::after{

  content:»;

  position:absolute;

  z-index: 1;

  top: 0;

  right: -.5em;  

  bottom: 0;

  width: 1em;

  background: #ddd;

  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));

  background-image: -webkit-linear-gradient(top, #fff, #ddd);

  background-image: -moz-linear-gradient(top, #fff, #ddd);

  background-image: -ms-linear-gradient(top, #fff, #ddd);

  background-image: -o-linear-gradient(top, #fff, #ddd);

  background-image: linear-gradient(to bottom, #fff, #ddd);  

  -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);

  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);

  box-shadow: 2px 2px 2px rgba(0,0,0,.4);

  -webkit-transform: skew(10deg);

  -moz-transform: skew(10deg);

  -ms-transform: skew(10deg);

  -o-transform: skew(10deg);

  transform: skew(10deg);

  -webkit-border-radius: 0 5px 0 0;

  -moz-border-radius: 0 5px 0 0;

  border-radius: 0 5px 0 0;  

}

#tabs #current a,

#tabs #current a::after{

  background: #fff;

  z-index: 3;

}

#content

{

    background: #fff;

    padding: 2em;

position: relative;

z-index: 2;

    -moz-border-radius: 0 5px 5px 5px;

    -webkit-border-radius: 0 5px 5px 5px;

    border-radius: 0 5px 5px 5px;

    -moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

    -webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);

}

#content h3, #content h4, #content p

{

    margin: 0 0 15px 0;

}

#about

{

    color: #999;

}

#about a

{

    color: #eee;

}

web-stydia.com

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

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

Итак, начнем

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

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

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

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;
    }
}

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

forwww.com

Вкладки на чистом CSS — ТехноБлог Пакало Евгения

Чтобы сделать вкладки на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked.

Этот псевдосласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение “включено”. Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.

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

Разметка

<ul>
	<li>
		<input type="radio" name="tabs" checked>
		<label for="tab-1">First</label>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.
		</div>
	</li>
	<li>
		<input type="radio" name="tabs">
		<label for="tab-2">Second</label>
		<div>
			Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat.
		</div>
	</li>
	<li>
		<input type="radio" name="tabs">
		<label for="tab-3">Third</label>
		<div>
			Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
	</li>
</ul>

Стили

.tabs {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
}
.tabs:after {
	content: "";
	clear: both;
	display: block;
	height: 240px;
}
.tabs li {
	float: left;
}
.tabs li > input {
	display: none;
}
.tabs li > label {
	display: inline-block;
	border: 1px solid #999;
	border-right-width: 0;
	border-bottom-width: 0;
	height: 30px;
	line-height: 30px;
	padding: 5px 20px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.tabs li:last-child > label {
	border-right-width: 1px;
}
.tabs .tab-content {
	display: none;
	position: absolute;
	left: 0;
	padding: 20px;
	border: 1px solid #999;
	height: 200px;
	overflow-y: auto;
}

/* Функциональность: */

.tabs li > input:checked + label {
	background-color: #999;
}
.tabs li > input:checked ~ .tab-content {
	display: block;
}

Результат

Теги: css

Редактировать

wcoder.github.io

Табы на CSS3

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

<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>