Главная » Уроки » Адаптивные вкладки (табы) на CSS3

Адаптивные вкладки (табы) на CSS3

Не так давно, мы рассмотрели простейший способ реализации вкладок (табов) с содержанием, без подключения javascript, используя в работе исключительно стандарты .
Сегодня я хочу познакомить вас, с ещё одним, не менее интересным решением по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Как и в первом варианте, ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.
 

Адаптивные вкладки табы

 
Какие изменения были внесены относительно первого варианта?
Прежде всего, блок вкладок стал адаптивным, т.е. при просмотре на мобильных устройствах, размер вкладок изменяется в зависимости от размеров экранов пользовательских устройств, текст заголовков убирается и остаются только шрифт-иконки, указывающие на смысл содержания той или иной .
Шрифт-иконки прикрутил от Font Awesome, коллекция очень богатая и к тому же абсолютно бесплатна. Вы можете интегрировать иконки в любой проект используя скачанный набор со шрифтами, или же подключить к вашему файлу стилей css напрямую, с сайта разработчика через @import, используя такую строчку:

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

В демонстрационном примере именно так я и сделал, так что взглянув на исходники, легко разберётесь что к чему.
Структура вкладок в Html довольно проста. Базовый div-контейнер, связка <input> <label> и непосредственно секции <section>, в которых скрыт до поры до времени определенный контент. Всё! Ничего лишнего, никаких библиотек js, ни дополнительных файлов изображений в оформлении, внешний вид вкладок, а так же их функциональность, формируется исключительно средствами CSS. Конечно, использование новых стандартов CSS3, не гарантирует стабильной работы во всех браузерах без исключения, но в современных версиях, вкладки работают отлично. IE-шка корректно отображает вкладки начиная с 9-й версии. Так что если вам не безразлична психика и чувства восприятия пользователей упорно сидящих на более старых версиях этого «брууузера», данный способ создания вкладок лучше не применять, а воспользоваться стабильным решением с применением jQuery.

HTML

<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Вкладка 1">Вкладка 1</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Вкладка 2">Вкладка 2</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Вкладка 3">Вкладка 3</label>
 
    <input id="tab4" type="radio" name="tabs">
    <label for="tab4" title="Вкладка 4">Вкладка 4</label>
 
    <section id="content-tab1">
        <p>
		Здесь размещаете любое содержание....
        </p>
    </section>  
    <section id="content-tab2">
        <p>
          Здесь размещаете любое содержание....
        </p>
    </section> 
    <section id="content-tab3">
        <p>
          Здесь размещаете любое содержание....
		</p>
    </section> 
    <section id="content-tab4">
        <p>
          Здесь размещаете любое содержание....
        </p>
    </section>    
</div>

Для организации блоков с содержанием я использовал тег <section> из обоймы HTML5, который применяется, в большинстве случаев, для разделения документа на разделы, различные и по смыслу и по содержанию, с возможностью использования собственных заголовков первого уровня <h1>.
Переключение вкладок происходит посредством взаимодействия атрибута checked в теге <input> и псевдокласса :checked, прочно связанными через идентификаторы в CSS. В обработке такого метода и спотыкается старенький, знаменитый тормоз прогресса Internet Explorer 8, с 9-й версии всё работает в лучшем виде.

Плавно мы подошли к самому интересному, к формированию стилей наших вкладок с помощью магии CSS. Здесь дела обстоят ещё проще, особо расписывать каждое свойство и параметры смысла нет, в исходниках прописал некоторые пояснения, так что думаю разобраться что куда и зачем, труда не составит, а возникнут вопросы, или обнаружите ошибку, пишите в комментариях, обязательно отвечу, и помогу.

CSS3

/* Базовый контейнер табов */
.tabs {
	min-width: 320px;
	max-width: 800px;
	padding: 0px;
	margin: 0 auto;
}
/* Стили секций с содержанием */
.tabs>section {
	display: none;
	padding: 15px;
	background: #fff;
	border: 1px solid #ddd;
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	/* прикрутим анимацию */
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
/* Описываем анимацию свойства opacity */
 
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* Прячем чекбоксы */
.tabs>input {
	display: none;
	position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
	display: inline-block;
	margin: 0 0 -1px;
	padding: 15px 25px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	border: 0px solid #ddd;
	border-width: 1px 1px 1px 1px;
	background: #f1f1f1;
	border-radius: 3px 3px 0 0;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
.tabs>label:before {
	font-family: fontawesome;
	font-weight: normal;
	margin-right: 10px;
}
.tabs>label[for*="1"]:before {
	content: "\f19a";
}
.tabs>label[for*="2"]:before {
	content: "\f17a";
}
.tabs>label[for*="3"]:before {
	content: "\f13b";
}
.tabs>label[for*="4"]:before {
	content: "\f13c";
}
/* Изменения стиля переключателей вкладок при наведении */
 
.tabs>label:hover {
	color: #888;
	cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
	color: #555;
	border-top: 1px solid #009933;
	border-bottom: 1px solid #fff;
	background: #fff;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 {
	display: block;
}
/* Убираем текст с переключателей 
* и оставляем иконки на малых экранах
*/
 
@media screen and (max-width: 680px) {
	.tabs>label {
		font-size: 0;
	}
	.tabs>label:before {
		margin: 0;
		font-size: 18px;
	}
}
/* Изменяем внутренние отступы 
*  переключателей для малых экранов
*/
@media screen and (max-width: 400px) {
	.tabs>label {
		padding: 15px;
	}
}

Оформить вкладки () вы можете как угодно, всё что в примере, это только пример, моё сиюминутное видение продукта, ничего больше. Значения Unicode нужных вам шрифт-иконок, сможете узнать на сайте разработчика, для этого просто нажмите на выбранную иконку и скопируйте выданный цифровой код, примерно такого вида: \f13b.
Обратите внимание, когда вы уменьшаете размер окна браузера, вкладки автоматом подстраиваются под текущий размер до определённого значения (в примере 680px), после этого значения, текстовые заголовки вкладок исчезают, остаются иконки. Тем самым достигается максимальная компактность всего блока вкладок, остаётся лишь правильно подобрать эти самые иконки, подходящие по смыслу представленному контенту внутри вкладок.

На этом наверное и всё. Смотрите живой пример работы вкладок (табов), скачивайте исходники, экспериментируйте с параметрами, и творите, творите, творите...

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

132 комментария
  1. Доброе время суток! Очень благодарен за эту доступную статью. Но, хочу обратить внимание на то, что этот метод не работает не только на старых IE но и на новых планшетах. Вообще на всех планшетах. И мне стало интересно — а есть ли возможность адаптировать этот метод под планшеты.

    Заранее спасибо.

    Ответить
  2. Дмитрий:

    Спасибо огромное. Приятно, что присутствуют комментарии в css, видно, что сделано с любовью))

    Ответить
  3. Елена:

    скажите, а как сделать якорь на третью вкладку, чтоб при переходе по нему открывалась эта третья вкладка?

    Ответить
    • driver:

      Здравствуйте.

      Самое простое, это использовать событие onclick где id соответствует идентификатору таба, который вы хотите видеть активным(раскрытым). Привязать событие можете к любому элементу( кнопке, тексту, картинке и т,д,)

      Например, чтобы открыть содержимое третьего таба с помощью выделенного текста, достаточно обнести его стандартной ссылкой с событием onclick:

      <a href="#content3" onclick="document.getElementById('tab3').checked='true';">Всё о HTML5</a>

      Ситуации бывают разные, так что, для того чтобы таб не просто активировался, но и чтобы страница прокручивалась до этого таба(удобно когда между ссылкой и табами много контента), мы прописываем идентификатор соответствующего блока с содержанием вкладки в атрибуте href="#content3", тем самым создаём якорь непосредственно к содержанию.

      Ответить
      • Андрей:

        А если всё то же самое, но перейти на таб нужно с другой страницы?

        Ответить
  4. Владислав:

    Здравствуйте, столкнулся с такой проблемой — поставил табы на свой сайт, все в порядке, но есть одно но: табы не переключаются в мобильной версии сайта на браузере google chrome. При чем такая проблема только на айфоне) все остальные браузеры справляются , но с хромом какие-то проблемы. Даже и не знаю, что с этим делать. Может кто знает, в чем проблема?)

    Ответить
  5. Спасибо за статью, но подскажите, пожалуйста, в чём может быть проблема!.. После вставки этого кода на одну из страниц

    section {

    display: none;

    padding: 15px;

    background: #fff;

    border: 1px solid #ddd;

    }

    пропадает весь контент с ГЛАВНОЙ страницы! Остаются меню, футер и пустота.) Причём на той странице, где надо, вкладки работают без проблем.)

    Ответить
    • Да, и на главной то, что пропадает, тоже прописано через section...

      Ответить
      • driver:

        Вы сами ответили на свой вопрос))

        Сделайте так:

        .tabs section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; }

        Т.е. стиль для вложенного селектора section в div с классом .tabs.

        Ответить
  6. Да, и ещё вопрос.) Можно ли сделать так, чтобы вкладка находилась ПОД секцией с содержанием (планируется, чтобы они у меня чуток подскакивали вверх при наведении/активации)? z-index'ом пробую, что-то не получается... Хотя, может я не туда прописываю.(

    Ответить
  7. TT:

    Спасибо за интересную статью!

    Вопросик один возник. Есть необходимость с другой страницы обратиться к нужному табу(открыть нужный таб). Как это реализовать?

    Ответить
  8. TT:

    Как убрать отступы между заголовками табов?

    Ответить
  9. Дмитрий:

    Как добавить ещё один tab, добавляю

    <input id="tab5" type="radio" name="tabs" > <label for="5" title="Обратная связь">Обратная связь</label>

    и

    #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4, #tab5:checked ~ #content5 { display: block; }

    Tab добавляется,но на него нельзя переключиться

    Ответить
    • driver:

      Ну как же, вот: Тынц

      А ошибка у вас в label for="5", а нужно label for="tab5". Всё очень просто, немного внимательней и всё)))

      Ответить
  10. Сергей:

    Огромное СПАСИБО !

    Скажите пожалуйста, как разместить несколько таких блоков с табами на одной странице, чтоб вставить вниз? (имею ввиду скопирыват потом вставить на туже страницу)

    Заранее благодарен !!

    Ответить
  11. Сергей:

    Скажите пожалуйста ! Можно ли поменять иконку в табе на свою png или jpg ? Если можно, то как ?

    Заранее благодарен.

    Ответить
    • driver:

      В табах используются шрифт-иконки от Font Awesome, набор иконок довольно богатый, можно подобрать любую в соответствии вашим требованиям. Также вы можете использовать и свои иконки форматов png или jpg, для этого придётся внести некоторые изменения в css, в частности в селекторах label и label[for*='1']:before, label[for*='2']:before, и т.д. по количеству вкладок.

      Для начала относительно позиционируем label добавив свойство position: relative; и настроим внутренние отступы padding: 15px 15px 15px 35px;. В итоге получаем следующее:

      label { display: inline-block; margin: 0 0 -1px; padding: 15px 15px 15px 35px; font-weight: 600; text-align: center; color: #aaa; position: relative; border: 1px solid #ddd; background: #f1f1f1; border-radius: 3px 3px 0 0; }

      А вот так будет выглядеть код для первой вкладки с fav-иконкой моего блога:

      label[for*='1']:before { width: 16px; content: " "; background-image: url(favicon.ico); position: absolute; left: 12px; top: 14px; height: 16px; }

      В background-image: правильно пропишите путь до нужной картинки!

      Соответственно шрифт-иконки от Awesome просто исключите из работы, банально удалив или закомментировав:

      /*label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; }*/

      Для наглядности набросал пример в онлайн-редакторе: Тынц

      Ответить
      • Сергей:

        Огромное Вам СПАСИБО !!!

        ВСЕ ПОЛУЧИЛОСЬ ! Даже не знаю, чтоб я без Вас делал.

        Пришлось немного помучится, так как мои знания в html? css... близки к нулю.

        Но не получается выровнять текст вкладки с названием. (хочу чтоб текст был справа, а моя иконка слева)

        Подскажите пожалуйста как это можно сделать.?

        Еще раз СПАСИБО !

        Ответить
        • driver:

          Если все значения свойств из примера в онлайн-редакторе оставили без изменений, то иконка конкретно должна выводится слева от текста. Не видя пациента трудно его лечить, ну не телепат я)))

  12. Сергей:

    Я же не знал, что Вы не телепат! ))

    Если Вам не трудно, посмотрите пожалуйста https://jsfiddle.net/myproplata/Lfgvhxxb/

    Ответить
    • driver:

      Посмотрел, разгрёб весь фарш, получилось так: держите

      При использовании иконки большего размера(в примере 16px) следует подкорректировать внутренние отступы в label. Например если иконка размером 30px Х 30px, то необходимо увеличить отступ от левого края, тем самым высвободив место для размещения иконки, примерно так:

      padding: 15px 15px 15px 48px;

      Ну, и подправить расположение самой иконки в label[for*='1']:before, уменьшить расстояние от верхнего края, так чтобы иконка смотрелась симметрично, например, выставьте значение top: 8px; при размерах иконки 30px Х 30px.

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru