Как адаптировать табы (вкладки) для мобильной версии?
Приветствую всех!
Есть проблема с адаптацией табов.
На сайте 7 основных категорий + 1 категория с названием "Другое".
В категории "Другое" - 5 подкатегорий, решено было сделать их с помощью табов, т.к. категории слишком малы, чтобы выделять под них отдельные CSS файлы, я посчитала это расточитльством.
Табы прилично себя ведут только на десктопной версии и при уменьшении до 735, дальше вкладки табов начинают наползать на содержимое сверху. Не могу понять, как так происходит. При добавлении position absolute ситуация не улучшается. Может быть, структура табов не подходящая? HTML:
<div class="container-tabs"> <div class="tabs-top_line"></div> <ul class="container-tabs_inner"> <li class="tab tab--active">Бронза, чугун</li> <li class="tab">Мебель</li> <li class="tab">Елочные игрушки</li> <li class="tab">Брендовые ручки</li> <li class="tab">Книги</li> </ul> <div class="container-tabs"> <div class="content content--active"> </div> </div> </div> |
<div class="container-tabs"> <div class="tabs-top_line"></div> <ul class="container-tabs_inner"> <li class="tab tab--active">Бронза, чугун</li> <li class="tab">Мебель</li> <li class="tab">Елочные игрушки</li> <li class="tab">Брендовые ручки</li> <li class="tab">Книги</li> </ul> <div class="container-tabs"> <div class="content content--active"> </div> </div> </div>
CSS:
.container-tabs { max-width: 500px; min-height: 16em; margin: 1em auto 0; max-width: 1114px; margin: 1em auto 0; } .container-tabs_inner { list-style: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; text-transform: uppercase; color: #AB69FF; justify-content: center; } .container-tabs_inner .tab { cursor: pointer; position: relative; display: block; margin: 0 -1px 0 0; padding: 7px 20px 8px; border-width: 1px 1px 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; background: none; } .container-tabs_inner .tab:hover { background-color: #f5f5f5; background: rgba(255, 245, 215, 0.3); /* text-decoration: underline; */ color: #f5f5f5; } .container-tabs_inner .tab--active { background-color: rgba(255, 245, 215, 0.3); color: #f5f5f5; pointer-events: none; } .content { display: none; padding: 3em; background-color: #1D1721; } .content--active { display: block; } |
.container-tabs { max-width: 500px; min-height: 16em; margin: 1em auto 0; max-width: 1114px; margin: 1em auto 0; } .container-tabs_inner { list-style: none; display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; text-transform: uppercase; color: #AB69FF; justify-content: center; } .container-tabs_inner .tab { cursor: pointer; position: relative; display: block; margin: 0 -1px 0 0; padding: 7px 20px 8px; border-width: 1px 1px 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; background: none; } .container-tabs_inner .tab:hover { background-color: #f5f5f5; background: rgba(255, 245, 215, 0.3); /* text-decoration: underline; */ color: #f5f5f5; } .container-tabs_inner .tab--active { background-color: rgba(255, 245, 215, 0.3); color: #f5f5f5; pointer-events: none; } .content { display: none; padding: 3em; background-color: #1D1721; } .content--active { display: block; }
JS:
const tabs = document.querySelectorAll(".tab"); // получаем массив всех блоков с содержимым вкладок const contents = document.querySelectorAll(".content"); // запускаем цикл для каждой вкладки и добавляем на неё событие for (let i = 0; i < tabs.length; i++) { tabs[i].addEventListener("click", ( event ) => { // сначала нам нужно удалить активный класс именно с вкладок let tabsChildren = event.target.parentElement.children; for (let t = 0; t < tabsChildren.length; t++) { tabsChildren[t].classList.remove("tab--active"); } // добавляем активный класс tabs[i].classList.add("tab--active"); // теперь нужно удалить активный класс с блоков содержимого вкладок let tabContentChildren = event.target.parentElement.nextElementSibling.children; for (let c = 0; c < tabContentChildren.length; c++) { tabContentChildren[c].classList.remove("content--active"); } // добавляем активный класс contents[i].classList.add("content--active"); }); } |
const tabs = document.querySelectorAll(".tab"); // получаем массив всех блоков с содержимым вкладок const contents = document.querySelectorAll(".content"); // запускаем цикл для каждой вкладки и добавляем на неё событие for (let i = 0; i < tabs.length; i++) { tabs[i].addEventListener("click", ( event ) => { // сначала нам нужно удалить активный класс именно с вкладок let tabsChildren = event.target.parentElement.children; for (let t = 0; t < tabsChildren.length; t++) { tabsChildren[t].classList.remove("tab--active"); } // добавляем активный класс tabs[i].classList.add("tab--active"); // теперь нужно удалить активный класс с блоков содержимого вкладок let tabContentChildren = event.target.parentElement.nextElementSibling.children; for (let c = 0; c < tabContentChildren.length; c++) { tabContentChildren[c].classList.remove("content--active"); } // добавляем активный класс contents[i].classList.add("content--active"); }); }
Конечно же, JS код не моего авторства, я взяла готовое решение.
Буду благодарна за любую помощь!
Дополнительно:
Судя по скрину, это не табы куда-то наползают. А контент предыдущего блока выпал из своего родителя.
Но делайте песочницу на codepen.io, там видно будет.
Похоже, Вы правы. Переделала структуру табов, но и новые табы наползают на верхнюю часть... Вернула все как было.
Даже не знаю, что делать и почему так произошло...
Мне такой подход нравится: на маленьких экранах табы превращаются в аккордионы.
snippet
- Спасибо большое, надо научиться их делать! Благодарю за идею)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для адаптации табов (вкладок) для мобильной версии веб-сайта можно использовать подход с использованием медиа-запросов и немного CSS.
Прежде всего, необходимо определить, какие стили табов вы хотите изменить для мобильной версии. Это может быть размер текста, отступы, ширина, высота и т.д.
Далее, создайте медиа-запрос для устройств с маленькими экранами, например для ширины экрана менее 768 пикселей:
@media only screen and (max-width: 768px) { /* Ваши стили для мобильной версии табов здесь */ }
Внутри медиа-запроса вы можете задать новые стили для табов, которые будут применяться только на устройствах с маленькими экранами. Например, вы можете изменить ширину табов на 100%, чтобы они занимали всю ширину экрана, или уменьшить отступы между ними для лучшей читаемости на мобильных устройствах.
Также, если у вас есть скрипт, который инициализирует табы (например, jQuery UI Tabs), убедитесь, что он также корректно работает на мобильных устройствах. Может потребоваться немного изменить скрипт для лучшей адаптации к мобильным устройствам.
Не забывайте также протестировать изменения на различных устройствах и браузерах, чтобы удостовериться, что табы выглядят и работают правильно на всех платформах.