Вкладки на 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
Табы для сайта на jQuery
Табы — очень распространенный элемент на сайте, который часто используется для динамичного представления какой-нибудь структурной информации. Вспоминаю свой опыт реализации табов на сайте. Для этого я в первую очередь полез искать готовые скрипты, библиотеки, пришлось знакомиться с инструкциями по запуску скрипта. На самом деле оказалось все намного проще. Для работы табов нам пригодится всего 2 функции jquery: index() и eq(). Идея следующая: при клике на таб определяем его индекс, закрываем все контейнеры с информацией и открываем контейнер под тем же индексом, что и таб, на который кликнули. Важно, чтобы в html порядок табов и контейнеров соответствовал друг другу. html:
Как видите, достаточно определить индекс нажатой кнопки и открыть контейнер под тем же индексом. Пример работы табов с готовым оформлением вы можете увидеть на демо: И css для примера:
#hellotabs < width: 980px; margin: 0 auto; >#hellotabs ul < margin: 0; padding: 0; >#hellotabs ul li < display: inline-block; font-family: helvetica; padding: 10px 50px; border: 1px solid rgb(216, 216, 216); margin: 0px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; border-bottom: none; background: rgb(222,239,255); background: -moz-linear-gradient(top, rgba(222,239,255,1) 0%, rgba(152,190,222,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,239,255,1)), color-stop(100%,rgba(152,190,222,1))); background: -webkit-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); background: -o-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); background: -ms-linear-gradient(top, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); background: linear-gradient(to bottom, rgba(222,239,255,1) 0%,rgba(152,190,222,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); color: rgb(31, 29, 29); text-shadow: 1px 1px 0px rgb(219, 219, 219); cursor: pointer; >#hellotabs ul li:hover,#hellotabs ul li.active < background: rgb(240,249,255); /* Old browsers */ background: -moz-linear-gradient(top, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */ >#hellotabs .hellotabs-content < border: 1px solid rgb(216, 216, 216); padding: 10px 20px; >#hellotabs .hellotabs-content .hellotabs-content-item < display:none; >#hellotabs .hellotabs-content .hellotabs-content-item.active
Табы в веб-дизайне
Табы, или модальные вкладки, — довольно популярный элемент пользовательского интерфейса. Их предназначение — размещение бОльшего количества контента в одном месте. Конечно, и их надо уметь оформлять. Смотрим подборку из 50 примеров хорошего оформления табов.
КОММЕНТАРИИ
naikom :
Пост написан специально для этого блога, если бы вы смотрели внимательнее, то увидели бы присутствие и русскоязычных примеров в подборке.
ferhzzz :
я считаю надо второй частью сделать пост о плохом дизайне табов, не все же с зарубежных блогов копирастить
Подскажите, где можно найти уроки и примеры написания подобных вещей?
naikom :
Русскоязычные сайты рекламировать не буду, а если понимаете английский, попробуйте, например, запрос tabs in web design tutorials
Что такое табы? Табы (вкладки) для сайта на 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 организовать проще и код выглядит немного компактнее, а работать будут безупречно.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.