Вкладки на 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 без использования скриптов
Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом 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, и, собственно маркетинговое продвижение не только сайтов, а проектов в комплексе 🙂
Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности 🙂
Вкладки на чистом CSS
Чтобы сделать вкладки на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked .
Этот псевдокласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положении “включено”. Переключение элементов в такое состояние происходит с помощью атрибута checked тега или пользователем.
Ранее мы уже реализовали меню навигации с выпадающим списком пользуясь этим же методом.
Разметка
Стили
.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
Как сделать вкладки на чистом CSS
На этом уроке мы научимся делать простые вкладки на чистом CSS и никакого JavaScript. В ряде случаев этого решения вполне достаточно, ограничиваясь возможностями только CSS стилей.
HTML код
Сначала создадим обертку для вкладок с классом wrap. Затем блок для вкладок tabs, навигацию для переключения вкладок tabs__items, вкладки-ссылки tabs__item. В адресах ссылок пропишем названия-якоря и точно такие же названия укажем в идентификаторах у текстовых блоков, таким образом связав их между собой. Далее создадим три блока с содержимым табов tab__box.
CSS код
Сделаем для обертки отступ сверху, ограничим ее по ширине и расположим по середине.
.wrap padding: 40px 0;
max-width: 900px;
margin: 0 auto;
>
Сделаем оболочку для табов флекс-контейнером, для построения табов в один ряд.
.tabs__items display: flex;
>
Поделим поровну пространство для табов и так же сделаем их контейнером для ссылок.
.tabs__item flex: 0 1 33.333%; // управление размерами вкладок
height: 50px; // высота вкладок
display: flex;
justify-content: center; // центрирование по горизонтали
align-items: center; // центрирование по вертикали
text-transform: uppercase; // перевод в верхний регистр
color: #fff; // цвет ссылок
text-decoration: none; // убираем подчеркивание ссылок
>
Изначально все вкладки нужно спрятать.
.tab__box position: relative; // относительное позиционирование
padding: 20px; // внутренние отступы
font-size: 18px;
line-height: 24px;
display: none; // вкладки скрыты
>
Как добиться, чтобы при нажатии на вкладку, показалось ее содержимое? Поможет нам псевдо-класс :target, который при клике по цели, применит заданный стиль к элементу с якорем.
.tab__box:target display: block; // покажет содержимое при клике
>
Мы хотим, чтобы при клике, сам таб и бокс с контентом меняли цвет фона и здесь без псевдоэлемента никак не обойтись. Создадим для вкладок с контентом пустые блоки при помощи псевдоэлемент :before.
.tab__box:before content: «»;
height: 50px;
width: 33.333%;
position: absolute;
top: -50px;
>
Покрасим все блоки в два разных цвета, обратившись к каждому через псевдокласс :nth-child.
.tab__box:nth-child(1) background-color: #3fc1c9;
>
.tab__box:nth-child(1):before background-color: #3fc1c9;
left: 0;
>
.tab__box:nth-child(2) background-color: #fc5185;
>
.tab__box:nth-child(2):before background-color: #fc5185;
left: 33.333%;
>
.tab__box:nth-child(3) background-color: #3fc1c9;
>
.tab__box:nth-child(3):before background-color: #3fc1c9;
right: 0;
>
Цветной фон перекрывает меню навигации, поэтому переместим надпись на слой выше.
.tabs__item span position: relative;
z-index: 2;
>
Демонстрация переключения вкладок
Создано 27.03.2020 10:32:20
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.