Как сделать адаптивные табы (вкладки) на css без использования скриптов
Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом 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[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
Как заставить это работать
А тут все просто.
Добавляем следующий 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
Строками выше мы добавляем особы стиль для активного таба используя :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; >>
Ну вот по сути и все. Наши табы готовы :). Вы их можете менять как угодно, добавлять-удалять. Спасибо за внимание ��
автор: Роман Довгаль
С 2010 года я занимаюсь интернет маркетингом. Сюда входит и SEO, и SMM, и SMO, и, собственно маркетинговое продвижение не только сайтов, а проектов в комплексе 🙂
Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности 🙂
Табы в веб-дизайне
Табы, или модальные вкладки, — довольно популярный элемент пользовательского интерфейса. Их предназначение — размещение бОльшего количества контента в одном месте. Конечно, и их надо уметь оформлять. Смотрим подборку из 50 примеров хорошего оформления табов.
КОММЕНТАРИИ
naikom :
Пост написан специально для этого блога, если бы вы смотрели внимательнее, то увидели бы присутствие и русскоязычных примеров в подборке.
ferhzzz :
я считаю надо второй частью сделать пост о плохом дизайне табов, не все же с зарубежных блогов копирастить
Подскажите, где можно найти уроки и примеры написания подобных вещей?
naikom :
Русскоязычные сайты рекламировать не буду, а если понимаете английский, попробуйте, например, запрос tabs in web design tutorials
Вкладки на CSS
Вкладки представляют собой набор блоков, между которыми можно переключаться щелчком по «выступу» с заголовком блока (рис. 1).
Рис. 1. Вид вкладок
Для создания вкладок мы используем группу переключателей, поскольку они позволяют выбрать только один переключатель из группы. Все вкладки вставляем в с классом tabs , а для каждой вкладки используем набор из , и , которые вложены в с классом tab (пример 1).
Пример 1. Код отдельной вкладки
Элемент нужен для создания функционала вкладок, в стилях к нему позже добавим псевдокласс :checked . Элемент используется для заголовка каждой вкладки, его надо связать с с помощью атрибутов id и for . A хранит содержимое вкладки.
В CSS сперва прячем исходные переключатели с помощью свойства display со значением none .
input[type="radio"]
Чтобы вкладки располагались по горизонтали, добавим к классам tab и tab-title свойство display со значением inline-block .
.tab, .tab-title
Заголовок вкладок сделаем серого цвета с рамкой, активная вкладка будет белой. Стиль заголовка активной вкладки получаем за счёт комбинации селекторов :checked и tab-title . В стиле смещаем на один пиксель вниз, чтобы заголовок и содержимое вкладки образовывали единое пространство без линии снизу. И добавляем свойство z-index для отображения заголовка поверх содержимого вкладки.
.tab :checked + .tab-title < position: relative; /* Относительное позиционирование */ background: #fff; /* Цвет фона */ top: 1px; /* Сдвигаем вниз */ z-index: 1; /* Отображаем поверх содержимого */ >Содержимое каждой вкладки прячем опять же через display . Нам также требуется явно задать ширину блока как 100%, так он будет занимать всю доступную ширину. Чтобы значение padding не влияло на ширину блока, можно воспользоваться свойством box-sizing или вычислить ширину через функцию calc().
.tab-content < padding: 10px; /* Поля вокруг текста */ width: 100%; /* Ширина */ box-sizing: border-box; /* Ширина не включает padding */ или padding: 10px; /* Поля вокруг текста */ width: calc(100% - 20px); /* Ширина содержимого */ >Стиль содержимого активной вкладки задаём через довольно громоздкий селектор.
.tab :checked + .tab-title + .tab-content
Впрочем, его можно заменить на более изящный и компактный с помощью братского селектора.
.tab :checked ~ .tab-content
Окончательный код для создания вкладок с использованием псевдокласса :checked показан в примере 2.
Пример 2. Вкладки на CSS
См. также
- box-sizing
- height
- width
- Аккордеон меню
- Выпадающее меню
- Использование :checked
- Открываем блочную модель
- Подсказка в поле формы
- Пользовательские формы
- Псевдокласс :checked
- Размеры блока
- Спойлер
- Стилизация переключателей
- Стилизация флажков
- Строчно-блочные элементы
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label
Что такое табы? Табы (вкладки) для сайта на CSS и JavaScript
Табы на своем сайте можно сделать на «чистом» CSS и на JavaScript. Каждый может выбрать себе наиболее подходящий способ.
Табы — это вкладки. Они удобны тем, что позволяют очень компактно уместить много информации на веб-странице. По сути, вы размещаете табы (несколько вкладок) с названиями информации, которая под ними содержится. Пользователь нажимает на нужный таб и ему открывается соответствующая информация. То есть каждая отдельная вкладка — это отдельный блок информации, который открывается при ее активации.
С технической стороны, табы представляют собой ссылки и другие HTML-компоненты, которые скрыты от пользователя до момента их активации. Оформить табы можно как угодно: ограничение — полет вашей фантазии и навыков работы с CSS.
Табы CSS
Табы при помощи «чистого» CSS можно реализовать несколькими способами. Наиболее популярный способ — это реализация с использованием радиокнопок.
Допустим мы имеем вот такой HTML-код:
Информация, содержащаяся в первом табе.
Информация, содержащаяся во втором табе.
Информация, содержащаяся в третьем табе.
Код CSS тогда будет таким:
.mytabs
font-size: 0;
>
.mytabs>input[type=»radio»]
display: none;
>
.mytabs>div
/* изначально скрываем контент от пользователей */
display: none;
border: 2px solid #e5e5e5;
padding: 12px 20px;
font-size: 18px;
>
/* делаем видимым контент, который выбран пользователем в качестве активированной радиокнопки */
#mytab-button-1:checked~#mycontent-1,
#mytab-bbutton-2:checked~#mycontent-2,
#mytab-button-3:checked~#mycontent-3
display: block;
>
.mytabs>label
display: inline-block;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: #f4f4f4;
border: 2px solid #e5e5e5;
padding: 4px 10px;
font-size: 18px;
line-height: 1.7;
transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
cursor: pointer;
position: relative;
top: 2px;
>
.mytabs>label:not(:first-of-type)
border-left: none;
>
.mytabs>input[type=»radio»]:checked+label
background-color: #eee;
border-bottom: 1px solid #eee;
>
Нужн понимать, что это всего лишь одна вариация исполнения. Даже ее можно модифицировать под свой вкус и выполнить отоброжение самих кнопок табов на любой вкус. Суть этого метода, что он завязан на исполнении радиокнопок при помощи CSS.
Табы CSS: псевдокласс «:target»
Табы, организованные при помощи CSS таким способом, визуально практически ничем не буд у т отличаться от первого способа. Вся разница — это техническая организация.
Допустим, мы имеем вот такой HTML-код:
Информация, содержащаяся в первой вкладке.
Информация, содержащаяся во второй вкладке.
Информация, содержащаяся в третьей вкладке.
Название первого таба
Название второго таба
Название третьего таба
Код CSS будет таким:
.mytabs
display: flex;
flex-direction: column;
>
.mytabs__links
display: flex;
width: 950%;
overflow-x: auto;
overflow-y: hidden;
margin-left: auto;
margin-right: auto;
margin-bottom: 12px;
order: 0;
white-space: nowrap;
background-color: #eee;
border: 2px solid #e3f5fd;
box-shadow: 0 3px 5px 0 #e3f5fd;
>
.mytabs__links>a
display: inline-block;
text-decoration: none;
padding: 8px 12px;
text-align: center;
color: #d5d5d5;
>
.mytabs__links>a:hover
background-color: rgba(225, 241, 252, 0.4);
>
.mytabs>#mycontent-1:target~.mytabs__links>a[href=»#mycontent-1″],
.mytabs>#mycontent-2:target~.mytabs__links>a[href=»#mycontent-2″],
.mytabs>#mycontent-3:target~.mytabs__links>a[href=»#mycontent-3″]
background-color: #bddefb;
cursor: default;
>
.mytabs>div:not(.mytabs__links)
display: none;
order: 1;
>
.mytabs>div:target
display: block;
>
Мы надеемся, что механизм работы такого способа организации табов вам понятен. Тут тоже визуально вы можете его оформлять как хотите. Если нужно, можете даже расположить табы вертикально.
Табы на чистом CSS делаются достаточно просто, если понимать, по какому принципу они выстраиваются. Но давайте по см отрим, как исполнить табы, используя возможности JavaScript.
Табы на JavaScript
Многие веб-разрабтчики утверждают, что для таких задач, как табы, лучше использовать CSS, так как таблицы стилей меньше нагружают веб-страницу, а JavaScript лучше использовать для более серьезных задач. Использовать или не использовать JavaScript для табов — это на ваше усмотрение, однако понимать, как их можно организовать было бы неплохо.
Допустим мы имеем вот такой HTML-код:
Информация, содержащаяся в первом табе.
Информация, содержащаяся во втором табе.
Информация, содержащаяся в третьем табе.
По логике, после написания HTML-кода должен присутствовать CSS. В данном примере мы не будем его описывать, потому что в нем должно содержаться только визуальное оформление ваших вкладок. Оформить их визуально вы можете самостоятельно. Но давайте посмотрим, каким будет JavaScript-код:
class ItcTabs
constructor(target, config)
const defaultConfig = <>;
this._config = Object.assign(defaultConfig, config);
this._elTabs = typeof target === ‘string’ ? document.querySelector(target) : target;
this._elButtons = this._elTabs.querySelectorAll(‘.mytabs__button’);
this._elPanes = this._elTabs.querySelectorAll(‘.mytabs__pane’);
this._eventShow = new Event(‘mytab.itc.change’);
this._init();
this._events();
>
_init()
this._elTabs.setAttribute(‘role’, ‘tablist’);
this._elButtons.forEach((el, index) =>
el.dataset.index = index;
el.setAttribute(‘role’, ‘mytab’);
this._elPanes[index].setAttribute(‘role’, ‘tabpanel’);
>);
>
show(elLinkTarget)
const elPaneTarget = this._elPanes[elLinkTarget.dataset.index];
const elLinkActive = this._elTabs.querySelector(‘.mytabs__btn_active’);
const elPaneShow = this._elTabs.querySelector(‘.mytabs__pane_show’);
if (elLinkTarget === elLinkActive)
return;
>
elLinkActive ? elLinkActive.classList.remove(‘mytabs__button_active’) : null;
elPaneShow ? elPaneShow.classList.remove(‘mytabs__pane_show’) : null;
elLinkTarget.classList.add(‘mytabs__button_active’);
elPaneTarget.classList.add(‘mytabs__pane_show’);
this._elTabs.dispatchEvent(this._eventShow);
elLinkTarget.focus();
>
showByIndex(index)
const elLinkTarget = this._elButtons[index];
elLinkTarget ? this.show(elLinkTarget) : null;
>;
_events()
this._elTabs.addEventListener(‘click’, (e) =>
const target = e.target.closest(‘.mytabs__button’);
if (target)
e.preventDefault();
this.show(target);
>
>);
Заключение
Сегодня мы рассмотрели, как можно организовать табы на чистом CSS и при помощи JavaScript. Как видно из статьи, табы на CSS организовать проще и код выглядит немного компактнее, а работать будут безупречно.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.