Главная » Уроки » Адаптивные вкладки (табы) на 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), после этого значения, текстовые заголовки вкладок исчезают, остаются иконки. Тем самым достигается максимальная компактность всего блока вкладок, остаётся лишь правильно подобрать эти самые иконки, подходящие по смыслу представленному контенту внутри вкладок.

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

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

135 комментариев
  1. Сергей:

    Большое СПАСИБО за быструю помощь, и потраченное Вами время на мои примитивные вопросы. Все получилось!

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

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

    Ответить
  3. Добрый день! Решение супер, но у меня вот что выходит yadi.sk/i/kFU7M4g4qkN6c

    Ответить
  4. Логгер:

    Добрый день.

    Как сделать, чтобы работали Яндекс Карты в неактивной вкладке? Если карта помещена в неактивной вкладке, после выбора нужного таба рисунок карты не показывается. Как быть? Спасибо.

    Ответить
    • driver:

      Доброго времени суток!

      Статичные изображения Яндекс.Карт(Static API) прекрасно отображаются: см.пример

      Тоже самое и с интерактивными картами(JavaScript API), всё прекрасно работает: см.пример

      Ответить
  5. Алексей:

    Здравствуйте, подскажите в чем может быть дело!

    На одном моем сайте я все отлично настроил, все работает, а на другом у меня все пропадает. Вместо всего контента и комментариев белое поле и больше не чего.

    Ответить
    • driver:

      Здравствуйте, Алексей.

      В табах я использовал тег <section> с display: none; по-умолчанию

      Предполагаю, что в вашем шаблоне этот тег тоже используется, отсюда и конфликт.

      Попробуйте в css связать секции с вкладками: .tabs section

      Более подробно отвечал уже: тынц

      Ответить
  6. Алексей:

    Сделал все как Вы и сказали, вкладки отображаются контент во второй вкладке отображается корректно (это комментарии вконтакте), а в первой вкладке комментарии wordpress исчезли. Вкладка № 1 получается пустой! Подскажите где здесь может быть подвох?

    Ответить
  7. Алексей:

    Просмотрел код comments.php оказывается у меня в нем есть и section, и input, и lable в итоге стили вкладок применились к полям формы комментариев. Возможно ли их как то различить?

    Я просто новичок во всем этом деле!

    Ответить
    • driver:

      В CSS для этих элементов используйте селекторы потомков, например .tabs section, или .tabs > section. Тоже самое и с input, и label

      Скорее всего, корректно сработают селекторы такого типа .tabs > section, .tabs > input и .tabs > label. В этом случае селектор будет выбирать непосредственно только дочерние элементы блока div с классом .tabs

      Ответить
      • Алексей:

        Спасибо большое, очень помогли!

        Все работает превосходно, надеюсь больше ни каких ошибок не увижу!

        Ответить
  8. Алексей:

    Добрый день.

    Вкладки работают отлично — спасибо.

    Вопрос: как сделать так, чтобы в неактивной вкладке после ее выбора показывалась Яндекс Карта? Сейчас она не появляется, виден лишь серый квадрат без самой карты.

    Спасибо.

    Ответить
  9. Вадим:

    Добрый день! Возможно ли применить эффект fade или slide при переключении вкладок? Или это только с jquery?

    Ответить
    • driver:

      Здравствуйте, Вадим.

      Конечно возможно, используя эффекты перехода(transition), трансформации(transform) или анимацию(animation), благо CSS3 предоставляет практически неограниченные возможности для этого.

      Эффект fade, например, можно легко воспроизвести с помощью перехода свойства opacity от 0 до 1, т.е. от полной прозрачности элемента до его непрозрачности. В паре с трансформациями можно вообще творить чудеса.

      Slide-эффект тоже самое, трансформации и переходы. С помощью этих универсальных свойств вы сможете создавать простые анимации для элементов, вкладки не исключение.

      Более сложные анимации реализуются объединением простых с помощью правила CSS @keyframes.

      Что касаемо данных вкладок, набросал для вас пример простейшей анимации: тынц >>

      При этом не забывайте, что css-анимации поддерживаются современными браузерами, в IE9- поддержка отсутствует напрочь.

      Ответить
  10. Вадим:

    Спасибо за быстрый ответ по использованию эффектов. Сейчас делаю меню на сайте и столкнулся с неразрешимой проблемой: устанавливаю в одну из вкладок скрипт, который подгружает с сервера форму. И она отображается криво, как я понял эта форма тоже содержит теги, которые применяются в данном меню. Отсюда вопрос: что можно с этим сделать, чтобы стили от табов не работали для скрипта?

    Ответить
    • driver:

      В предыдущем ответе, я специально в примере(см.ещё раз) прописал селекторы с вложенностью, явно указав дочерние селекторы для переключателей вкладок .tabs > input и .tabs > label, т.е. использовал дочерние селекторы, поэтому все стили установлены именно для этих селекторов и не дадут никакого результата для форм внутри тега <section>. В первую вкладку положил простейшую контактную форму: см.пример, как видите форма отображается по-умолчанию)))

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

      Ответить
      • Вадим:

        Спасибо еще раз!! Может поможете еще немного? Не получается прикрутить стили к табам от одного сайта, точнее не до конца получается. Написать сюда или лучше через ватсап/вибер?

        Ответить
        • Вадим:

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

        • driver:

          Можете написать мне через контактную форму, которая находится на странице «Контакты», представляете, есть и такая у меня на блоге)))

          Скиньте весь фарш (html+css) ваших вкладок и опишите, что вам нуна в итоге. В ближайшее время, обязательно постараюсь помочь.

        • Вадим:

          Отправил информацию в контакты. Не прикрепил файлы, если надо, закину куда скажешь.

  11. Сергей:

    Здорово! Отличное решение. Приятный и нейтральный стиль, который подойдет к любому проекту. Спасибо за потраченное Вами время, чтобы предоставить такую хорошую работу!

    Ответить
  12. Vortex:

    Спасибо, то что искал, везде вертикально не тянутся только у вас адаптив нашел!

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

Отправляя к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