Что такое табы в верстке. Как сделать адаптивные табы (вкладки) на css без использования скриптов. CSS стили для табов с использованием css3 по пунктам

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

Итак, начнем

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

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

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

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

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

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

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

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

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

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

Хиты продаж

Последнее

На этом мы закончили с написанием нашего 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 { 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 :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

#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, используя в работе исключительно стандарты .
Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.

Какие изменения были внесены относительно первого варианта?
Прежде всего, блок вкладок стал адаптивным, т.е. при просмотре на мобильных устройствах, размер вкладок изменяется в зависимости от размеров экранов пользовательских устройств, текст заголовков убирается и остаются только шрифт-иконки, указывающие на смысл содержания той или иной .
Шрифт-иконки прикрутил от , коллекция очень богатая и к тому же абсолютно бесплатна. Вы можете интегрировать иконки в любой проект используя скачанный набор со шрифтами, или же подключить к вашему файлу стилей css напрямую, с сайта разработчика через @import , используя такую строчку:

@ import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" ) ;

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка и непосредственно секции

, в которых скрыт до поры до времени определенный контент. Всё! Ничего лишнего, никаких библиотек js, ни дополнительных файлов изображений в оформлении, внешний вид вкладок, а так же их функциональность, формируется исключительно средствами CSS. Конечно, использование новых стандартов CSS3, не гарантирует стабильной работы во всех браузерах без исключения, но в современных версиях, вкладки работают отлично. IE-шка корректно отображает вкладки начиная с 9-й версии. Так что если вам не безразлична психика и чувства восприятия пользователей упорно сидящих на более старых версиях этого «брууузера», данный способ создания вкладок лучше не применять, а с применением jQuery.

HTML

< div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "Вкладка 1" > Вкладка 1 < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Вкладка 2" > Вкладка 2 < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Вкладка 3" > Вкладка 3 < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "Вкладка 4" > Вкладка 4 < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p> Здесь размещаете любое содержание.... < section id= "content-tab4" > < p> Здесь размещаете любое содержание....

Вкладка 1 Вкладка 2 Вкладка 3 Вкладка 4

Для организации блоков с содержанием я использовал тег

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

.
Переключение вкладок происходит посредством взаимодействия атрибута checked в теге и псевдокласса:checked , прочно связанными через идентификаторы в CSS. В обработке такого метода и спотыкается старенький, знаменитый тормоз прогресса Internet Explorer 8, с 9-й версии всё работает в лучшем виде.
Плавно мы подошли к самому интересному, к формированию стилей наших вкладок с помощью магии CSS. Здесь дела обстоят ещё проще, особо расписывать каждое свойство и параметры смысла нет, в исходниках прописал некоторые пояснения, так что думаю разобраться что куда и зачем, труда не составит, а возникнут вопросы, или обнаружите ошибку, пишите в комментариях, обязательно отвечу, и помогу.

CSS3

/* Базовый контейнер табов */ . tabs { min- width: 320px; max- width: 800px; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ . tabs> section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } . tabs> section> p { margin: 0 0 5px; line- height: 1.5 ; color: #383838; /* прикрутим анимацию */ - webkit- animation- duration: 1s; animation- duration: 1s; - webkit- animation- fill- mode: both; animation- fill- mode: both; - webkit- animation- name: fadeIn; animation- name: fadeIn; } /* Описываем анимацию свойства opacity */ @- webkit- keyframes fadeIn { from { opacity: 0 ; } to { opacity: 1 ; } } @ keyframes fadeIn { from { opacity: 0 ; } to { opacity: 1 ; } } /* Прячем чекбоксы */ . tabs> input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ . tabs> label { display: inline- block; margin: 0 0 - 1px; padding: 15px 25px; font- weight: 600 ; text- align: center; color: #aaa; border: 0px solid #ddd; border- width: 1px 1px 1px 1px; 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: "\f 19a" ; } . tabs> label[ for *= "2" ] : before { content: "\f 17a" ; } . tabs> label[ for *= "3" ] : before { content: "\f 13b" ; } . tabs> label[ for *= "4" ] : before { content: "\f 13c" ; } /* Изменения стиля переключателей вкладок при наведении */ . tabs> label: hover { color: #888; cursor: pointer; } /* Стили для активной вкладки */ . tabs> input: checked+ label { color: #555; border- top: 1px solid #009933; border- bottom: 1px solid #fff; background: #fff; } /* Активация секций с помощью псевдокласса:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { 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; } }

/* Базовый контейнер табов */ .tabs { min-width: 320px; max-width: 800px; padding: 0px; margin: 0 auto; } /* Стили секций с содержанием */ .tabs>section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } .tabs>section>p { margin: 0 0 5px; line-height: 1.5; color: #383838; /* прикрутим анимацию */ -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /* Описываем анимацию свойства opacity */ @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Прячем чекбоксы */ .tabs>input { display: none; position: absolute; } /* Стили переключателей вкладок (табов) */ .tabs>label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; border: 0px solid #ddd; border-width: 1px 1px 1px 1px; 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:before { content: "\f19a"; } .tabs>label:before { content: "\f17a"; } .tabs>label:before { content: "\f13b"; } .tabs>label:before { content: "\f13c"; } /* Изменения стиля переключателей вкладок при наведении */ .tabs>label:hover { color: #888; cursor: pointer; } /* Стили для активной вкладки */ .tabs>input:checked+label { color: #555; border-top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; } /* Активация секций с помощью псевдокласса:checked */ #tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 { 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; } }

Оформить вкладки () вы можете как угодно, всё что в примере, это только пример, моё сиюминутное видение продукта, ничего больше. Значения Unicode нужных вам шрифт-иконок, сможете узнать на сайте разработчика, для этого просто нажмите на выбранную иконку и скопируйте выданный цифровой код, примерно такого вида: \f13b .
Обратите внимание, когда вы уменьшаете размер окна браузера, вкладки автоматом подстраиваются под текущий размер до определённого значения (в примере 680px), после этого значения, текстовые заголовки вкладок исчезают, остаются иконки. Тем самым достигается максимальная компактность всего блока вкладок, остаётся лишь правильно подобрать эти самые иконки, подходящие по смыслу представленному контенту внутри вкладок.

Смотрите живой пример работы вкладок (табов), скачивайте исходники, экспериментируйте с параметрами, и творите, творите, творите...

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

С Уважением, Андрей

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

Для создания табов мы будем использоваться тег input и CSS селектером :checked . Впервую очередь нам понадобиться создать разметку страницы на HTML

Tab One Tab Two Tab Three

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

Переходим к 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 > 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; }

Pure CSS Tabs

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

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

Responsive: yes

Dependencies: -