Горизонтальные табы на css. Делаем адаптивные табы без javascript и грязных хаков

15.07.2020 Новости

Здравствуйте, уважаемые читатели . В этот, такой морозный день мы будем делать с Вами красивые табы с помощью CSS и JQuery . Оказывается, что эти, так называемые, табы очень полезны для сайта в целом, они позволяют существенно сэкономить место на странице. Их можно разместить везде, в сайдбаре, или не посредственно, в самом контенте, статье.

Так же, табы, которые мы будем делать, красивого дезайна, они существенно украсят Ваш сайт. Во как:-) красиво и полезно, мне кажется редкое совпадение. Тем более делаются они только при помощи , соответственно: быстро загружаются, и не несут никакой нагрузки на сервер.

JQuery

$(document).ready(function() { $("#content div").hide(); // Скрытое содержимое $("#tabs li:first").attr("id","current"); // Какой таб показать первым $("#content div:first").fadeIn(); // Показ первого контента таба $("#tabs a").click(function(e) { e.preventDefault(); $("#content div").hide(); //Скрыть всё содержимое $("#tabs li").attr("id",""); //Сброс идентификаторов $(this).parent().attr("id","current"); // Активация идентификаторов $("#" + $(this).attr("title")).fadeIn(); // Показать содержимое текущей вкладки }); })();

Вот в принципе и всё, Вы главное экспериментируйте, В данные вкладки можно добавить фоновые изображения, которые существенно предадут им вида, только вот загружаться они будут дольше.

Совместимость с браузерами

Эти табы поддерживают практически все браузеры, только в некоторых они будут выглядеть чуть по другому, потому что многие, ещё пока, не поддерживают CSS3.

Вот и всё, надеюсь Вам понравилось:-) Если что то Вам будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

В продолжение предыдущего поста про стилизацию элементов выбора, хотел бы рассказать как сделать полностью адаптивные табы без использования javascript , абсолютного позиционирования и хаков с ссылками.

Для начала хотел бы сказать, что я не призываю отказаться от javascript в пользу лишь CSS, ниже будет представлен лишь один из способов реализации табов. Существует множество ситуаций, когда такой подход вам не подойдёт и где без JS не обойтись, но сейчас не об этом.

Давайте поймём что мы хотим видеть в качестве результата работы и какие требования мы выдвигаем к нему:

Работа без JavaScript,
Нет привязки к количеству табов (мы можем использовать один виджет на разных страницах с разным контентом внутри),
Адаптивность,
Максимальная кроссбраузерность и кроссплатформенность,
Максимально удобный и понятный UI,
Нет ограничений к внутреннему содержанию табов, будь то текст, медиа контент или же вёрстка внутри таба.

Визуально должно получиться что-то подобное:

Перед тем как показать свой вариант табов без JS , я хотел бы рассказать о некоторых вариантах реализаций, которые я нашёл в процессе решения этой задачи.

Вариант первый

Человек придумавший этот способ либо явно хотел поиздеваться над пользователями, либо он один из посетителей реддита, который создавал те самые «удобные» регуляторы громкости . У меня подобный подход вызывает нервный тик.

Суть метода заключается в следующем:

В качестве заголовков (самих кнопок) табов используются ссылки, в атрибут href , которых прописывается id соответствующей вкладки — div’а или любого другого элемента. Выделение активной вкладки происходит при помощи псевдокласса:target .

Работает это так:

Как вы могли заметить мы имеем кое-какие проблемы с использованием данного метода:

При нажатии на таб страница начинает скакать, так как браузер отправляет нас туда, куда ведёт данная ссылка. Избежать конечно же этого можно, но без JS уже ни как.
Активный заголовок таба не выделяется, это можно сделать, но крайне проблематично.
Изначально активных табов нет (так как мы ещё не нажимали на ссылки) и нам приходится прибегать к хаку и делать активным третий таб, выделить первый таким способом не получится.
Весьма спорная адаптивность: да, вкладки перестраиваются на новую строку при сужении экрана, а контент таба сужается вместе с ней, однако выглядит это не очень красиво. Эту проблему могут решить медиа запросы, однако учитывая то, что мы ходим не привязываться к количеству табов, на некоторых размерах дисплеев проблема останется.

Делаем оправданный вывод: этот метод нам не подходит так как не удовлетворят большей части требований. Реализации ужасная и я не советовал бы её использовать.

Вариант второй

Этот метод создания табов без JavaScript уже более практичен, хотя так же имеет некоторые проблемы в применении. Суть метода в следующем: для заголовков вкладок используются элементы checkbox и label , а при помощи псевдокласса:checked и ещё одного div элемента мы можем показать контент только активной вкладки и скрыть все остальные:

Tab-wrapper input:checked + label + .tab-item{display: block;}

Tab - wrapper input : checked + label + . tab - item { display : block ; }

Вот как это работает:

Как вы могли заметить, в этом примере мы используем position: absolute; для того, чтобы разместить заголовки вкладок сверху, а контент вкладки снизу. Это создаёт определённые проблемы:

Полная не адаптивность. При изменении размеров экрана вкладки падают вниз и контент вкладки закрывает их. Это можно исправить: сделать горизонтальный скролл вкладок, такое решение имеет место быть, но мне не очень нравится.
Так как для отображения контента вкладок мы используем абсолютное позиционирование нам придётся указывать фиксированную высоту вкладок, иначе они будут перекрывать контент, который находится ниже (видно в примере), а это значит что мы не можем использовать данный подход при заранее неизвестном количестве вкладок.

Конечно, в некоторых случаях этот метод можно применять, на пример, когда вы заранее знаете количество вкладок и объём контента внутри них. Но мы ищем универсальное решение, поэтому данный подход не применим в нашем случае.

Решение

Третий вариант, и он же решение, является модификацией второго метода. Работает он точно так же, однако мы не будем использовать абсолютное позиционирование и свойство float для заголовков.

В данном методе мы используем нынче модный flexbox для размещения вкладок и их контента. Вся прелесть flexbox тут заключается в том, что мы можем обозначить какие элементы отображать сначала, а какие в конце. Это можно сделать при помощи свойства order: 1; , которое по умолчанию равно нулю.

Адаптивность вкладок так же достигается за счёт flex свойства flex-grow: 1; , которое позволяет вкладкам растягиваться на всю ширину контента, за счёт этого мы можем не беспокоиться за отображение разного количества табов. Так же мы можем размещать контент любого и разного объёма внутри каждой вкладки, это не будет влиять на отображение контента после них.

Данный подход работает во всех современных браузерах, включая мобильные. Из, непривычных для многих, свойств используется только Flexbox, а он уже давно имеет широкую поддержку . В браузерах FireFox, Chrome, Safari и Opera мною не было обнаружено каких-либо проблем с работой вкладок.

Вы можете проверить данный подход на jsfiddle , или на своих проектах. Буду рад увидеть и другие предложения решений данной проблемы в комментариях.

Добрый вечер! Сегодня я вам расскажу, каким образом можно сделать табы (вкладки) на чистом 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 { 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 { display: none; width: 100%; float: left; padding: 15px; box-sizing: border-box; background-color:#ffffff; }

Как заставить это работать

А тут все просто.

Добавляем следующий css код

Tabs :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 { display: block; }

Строками выше мы добавляем особы стиль для активного таба используя :checked + label

#tab-first:checked ~ #tab-content-1 — данная строка говорит о том, что нам нужно отобразить контент, который имеет id=»tab-content-1″ , если tab-first имеет статус checked.

Pure CSS Tabs

Just HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Горизонтальные табы на css. Делаем адаптивные табы без javascript и грязных хаков

JQuery

Совместимость с браузерами

Вариант первый

Вариант второй

Решение

Адаптивные вкладки (табы) на чистом css и без скриптов

HTML код для табов с использованием css3 по пунктам

CSS стили для табов с использованием css3 по пунктам

Как заставить это работать

Делаем наши табы адаптивными

About a code

Nav Tab

About a code

CSS Tab

About a code

Tabs

About a code

Pure CSS Tabs

About a code

CSS Tabs

About a code

Pure CSS Tabs With Indicator

About a code

Animated Transition Tabs

About a code

Pure CSS Color Tabs

About a code

CSS Only Tabs

About a code

CSS3 Tabs

About a code

Tab Controls Using HTML And CSS

About a code

Pure CSS Tabs

Лучшие статьи по теме