Вкладки на 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
Tabs (табы) вкладки на CSS
Решение. Чтобы организовать контент на странице сайта в виде вкладок (еще называют «табы») можно использовать нижеприведенный Код №1 из Примера 1:
HTML CSS Вкладка 3
.tabs > div, .tabs > input < display : none >
.tabs label < padding : 5px ; border : 1px solid #d33 ; line-height : 28px ; cursor : pointer ; position : relative ; bottom : 1px ; >
.tabs > input:checked + label < background : #f83b2b59 ; >
.tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3) < display : block ; padding : 5px ; border : 1px solid #d33 >
Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки. Контент третей вкладки.
Пример1 и Код №1: Вкладки на чистом CSS
При добавлении или уменьшении количества вкладок нужно учесть, что нужно добавлять/убирать новые пары тега div и в стилях добавлять/убирать строки свойств « .tabs > input:nth-of-type(1):checked ~ div:nth-of-type(n) ».
Подборка примеров вкладок на CSS
Пример 2.1: Красивые вкладки на HTML+CSS
Пример 2.2: Стильные зеленые вкладки на HTML+CSS
Пример 2.3: Красивые вкладки в красно-серой теме на HTML+CSS (SCSS)
Пример 2.4: Красивые табы с интересным эффектом на CSS
Пример 2.5: Вкладки на CSS в классическом стиле