Главная » Уроки » Адаптивные вкладки (табы) на 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 !

129 комментариев
  1. Хороший пример. В стилях не хватает только:

    #content1, #content2, #content3, #content4{

    display: none;

    }

    Иначе не работает...

    Ответить
    • driver:

      Спасибо Юрий, ещё несколько раз проверил, всё работает, по крайней мере в последних версия браузеров точно. display:none; прописан для <section>. Смысла дублировать не вижу, IE8 и ниже, по любому данный метод не поддерживают.

      Ответить
  2. Badr:

    Отличный пост, Спасибо! Только вот я не пойму одно как если section:none; как он отображается? Немного концепцию недопонял.

    Ответить
  3. Badr:

    Прошу прощения section {display:none}

    Ответить
    • driver:

      Активация секций с помощью переключателя :checked

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

      По умолчанию при загрузке открыта первая вкладка, в теге <input> для этой вкладки прописан атрибут checked. Таким образом, можете легко задать любую вкладку, сделать её раскрытой при загрузке, а можете и вовсе все закрыть.

      Ответить
  4. Почему все заменились? Посмотрите к примеру у меня на сайте. В форме входа (Вверху есть «Войти в профиль». Все ужасно. При добавлении комментария после регистрации капчу тоже ввести невозможно. Как это решить?

    Ответить
    • driver:

      Нормальная форма входа, хотя я вообще-то не знаю, какая она должна быть, но ничего ужасного в ней я не заметил)) да и капча вводится. Именно по вкладкам, какие у вас ко мне вопросы?

      Ответить
      • Форма входа испорчена на странице материало, где я использую эти вкладки. На других все хорошо.

        Ответить
      • Конкретный вопрос: Как сделать стили конкретно к вкладкам, чтобы стили не распространялись на всю страницу?

        Ответить
        • driver:

          Конкретный ответ: дайте ссылку на страницу, где проявляется баг, согласитесь, искать страницу с названием «материало» затруднительно)))

  5. pasha:

    огромное спасибо, все круто!

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

    Ответить
  6. Я имел ввиду страницу с любым материалоМ, просто получилась опечатка)

    К примеру, www.gamepda.ru/load/golovolom...e_dark/10-1-0-64

    Вот еще и скриншот.

    Ответить
    • driver:

      У вас конфликт между стилями для тега <label> вкладок и форм используемых на сайте. Исправить ситуёвину можно добавив в css каждому label вкладок класс .tabs, примерно вот так:

      /* Стили вкладок (табов) */
      .tabs label {
      здесь свойства.... 
      }

      не забудьте добавить .tabs перед каждым селектором label входящем в набор стилей для вкладок, тем самым обозначите работу стилей только для label внутри div-контейнера с классом .tabs

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

      Ответить
  7. Юлиана:

    Спасибо за Ваш сайт.

    Ответить
  8. Спасибо, все работает бомба. Но была проблемка, из-за

    input { display: none; }

    Исчезло поле поиска с сайта. Исправил по аналогии с вышеописанной проблемой по <label> Получилось так:

    .tabs input { display: none; }

    Это на всяк случай, может у кого то будет подобная проблема. Результат использования вкладок:

    Ответить
    • driver:

      Всё правильно, видите как просто))) А предусмотреть все случайные совпадения и конфликты определений, свойств, довольно сложно, хотя в случае именно с этими табами, думаю, стоит выделить отдельно стили для элементов вкладок.

      Архив с исходниками обновил, в статье внёс соответствующие изменения

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

    Ребята, подскажите, пожалуйста, как расположить вкладки по центру?

    А то у меня их всего две и немного не симметрично смотрится.

    Спасибо

    Ответить
    • driver:

      Для label пропишите position: relative; и left: 25%;, этого будет достаточно.

      Ответить
  10. Антон:

    Добрый день.

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

    Графики отображаются при помощи библиотеки chartjs.org в виде canvas.

    Как можно сделать, чтобы отображались все графики?

    Заранее спасибо за помощь.

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

    Добрый вечер!

    Столкнулся с такой проблемой:

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

    Часть изображения с координатами:

    <img src="images/tabs.png" width="841" usemap="#Navigation" alt="tabs"> <map id="Navigation" name="Navigation"> <area shape="poly" coords="0,244,124,216,124,30,0,2" alt="Woodworking Essentials 1" href=""> </map>

    И часть уже упрощенного кода с Вашей статьи:

    <div class="tabs"> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1" title="Wordpress">111111</label> </div> <section id="content1"> 11111111111111111111111111 </section>

    Спасибо!!!

    Ответить
    • driver:

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

      В таком виде, как в статье, вкладки на скрытых чекбоксах, привязать к ссылкам координат на изображении, скорее всего не получится, во всяком случае я не нашёл рабочего решения на чистом CSS. Если же использовать скрытые блоки и активировать их с помощью :target привязав к ссылкам через идентификаторы, то идея вполне реализуемая. Набросал на скорую руку небольшой пример: Тынц Но это больше для понимания самого механизма, нежели для прямого использования

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

    возникла проблема с тегами input

    пропали текстовые поля для ввода и поиска ()

    виной всему часть:

    .tabs input {

    display:none;

    }

    но как исправить не знаю

    подскажите

    Ответить
    • driver:

      Используйте .tabs input[type="radio"]

      Тем самым, вы явно укажите свойство display:none; только для радио-кнопок внутри контейнера с классом tabs

      Или же так: div.tabs > input[type="radio"] {display:none;}

      В примере приведен селектор, согласно которому в контейнере div некоего класса «tabs» все радио-кнопки input будут временно исключены из документа, при этом другие элементы с тегом input, находящиеся на странице, будут работать и отображаться, как и прежде

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

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