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

134 комментария
  1. Александр:

    А как сделать свои иконки в закладках?

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

    Подскажите в чем может быть проблема вот пациент:

    Вообще ничего не работает. Заранее большое спасибо.

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

    Юзайте полную новость верх.

    Ответить
    • driver:

      Всё будет работать если стили табов поместите в конец файла engine.css, это что бы потом не потеряться, относительно вашей html-разметки табов, фарш css для них будет таким:

      /* Базовый контейнер табов */   
      .tabs-fullstory {
      	min-width: 320px;
      	max-width: 800px;
      	padding: 0px;
      	margin: 0 auto;
      }
      /* Стили секций с содержанием */
      .tabs-fullstory > section {
      	display: none;
      	padding: 15px;
      	background: #fff;
      	border: 1px solid #ddd;
      }
      	.tabs-fullstory > 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-fullstory > input {
      	display: none;
      	position: absolute;
      }
      /* Стили переключателей вкладок (табов) */
      .tabs-fullstory > 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-fullstory > label:before {
      	font-family: fontawesome;
      	font-weight: normal;
      	margin-right: 10px;
      }
      .tabs-fullstory > label[for*="1"]:before {
      	content: "\f19a";
      }
      .tabs-fullstory > label[for*="2"]:before {
      	content: "\f17a";
      }
      .tabs-fullstory > label[for*="3"]:before {
      	content: "\f13b";
      }
      .tabs-fullstory > label[for*="4"]:before {
      	content: "\f13c";
      }
      /* Изменения стиля переключателей вкладок при наведении */
      .tabs-fullstory>label:hover {
      	color: #888;
      	cursor: pointer;
      }
      /* Стили для активной вкладки */
      .tabs-fullstory > input:checked + label {
      	color: #555;
      	border-top: 1px solid #009933;
      	border-bottom: 1px solid #fff;
      	background: #fff;
      }
      /* Активация секций с помощью псевдокласса :checked */
      #tab1:checked ~ #content1,
      #tab2:checked ~ #content2,
      #tab3:checked ~ #content3,
      #tab4:checked ~ #content4 {
       display: block;
      }
      
      /* Убираем текст с переключателей 
      * и оставляем иконки на малых экранах
      */
      @media screen and (max-width: 680px) {
      	.tabs-fullstory > label {
      		font-size: 0;
      	}
      	.tabs-fullstory > label:before {
      		margin: 0;
      		font-size: 18px;
      	}
      }
      /* Изменяем внутренние отступы 
      *  переключателей для малых экранов
      */
      @media screen and (max-width: 400px) {
      .tabs-fullstory > label {
      	padding: 15px;
          }
      }

      В общем всё тоже самое, только уложенное в другое место))))

      По какой причине не предопределяются стили при прописке в style.css, для меня вопрос...Так что из этого файла ненужное(стили табов) подчистите

      Ответить
  4. Evgen:

    Большое спасибо за подсказку. С наступающим вас Новым годом!

    Ответить
  5. Evgen:

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

    Попутно возник еще вопросик: как сделать якоря для каждой вкладки чтобы на них можно было ссылаться с других страниц?

    Ответить
  6. Nick:

    супер. чистая классная верстка. вот только в скачанных файлах все окей а сдесь в примерах кода не совпадают дентифкаторы. то ли в css надо вместо content-tab1-4 написать просто content1-4 то ли в эйштиэмел дописать до контентов табы

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

    Спасибо за ваш код — единственный, заработавший параллельно с моим CSS.

    P.S. Использовала скачанный пример.

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

    Но есть вопрос: я использовала ваш вариант для списка из многих пунктов (на данный момент 11, но будет увеличиваться до 33 — алфавит), так вот на мобильниках буквы-заголовки вкладок не видны. Т.е. у меня вместо WP «А», вторая закладка «Б» и т.д. Уменьшение отступов для букв-заголовков ничего не меняет, как решить вопрос?

    Ответить
    • driver:

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

      На мобильниках буквы-заголовки вкладок не видны потому как по-умолчанию используется медиа-запрос

      @media screen and (max-width: 680px) { .tabs>label { font-size: 0; } .tabs>label:before { margin: 0; font-size: 18px; } }

      это значит, что при просмотре на экранах меньше 680px выводятся только иконки Font Awesome, а текст исключаем с помощью font-size: 0;

      Если вам не нужны иконки, а в переключателях вкладок планируете использовать только текст (в вашем случае буквы алфавита), просто выпилите из css шрифт-иконки от Font Awesome, а с помощью медиа-запросов можете настроить изменения вкладок (внешие и внутренние отступы, размер шрифта, рамка) при просмотре на малых экранах

      Не знаю, угадал ли я то что вам нуна, но набросал небольшой пример: тынц

      В примере сделал рабочими вкладки до буквы «Й» включительно, просмотрите весь фарш и если это оно самое, дальше, думаю, принцип дальнейших действий вам будет понятен )).

      Ответить
      • Evgeniya:

        Вероятно, да! Я сразу «выпилила» про иконки, т.к. они мне изначально были не нужны, а по поводу невидимости букв догадалась уже после того, как написала комментарий 🙂 Я довела до 11, у меня пока их столько, но принцип я поняла. А вот с кодом css, где буквы вместо иконок (сама не поняла как решить вопрос) — я так понимаю, что это первая часть до /* Базовый контейнер табов */? Весьма благодарна!

        Ответить
      • Evgeniya:

        Ан-нет. На мобильнике не видно, скрин делала из браузера, но там понятно, как выглядит.

        Ответить
        • driver:

          Попробуйте использовать медиа-запрос такого вида

          @media screen and (max-width: 680px) { .tabs > label { margin: 4px 0 -1px; } /* изменяем рамку активной вкладки */ .tabs > input:checked + label { border: 1px solid #ddd; border-top: 1px solid #009933; } }

          как в примере на jsfiddle, или же вовсе исключите @media из css табов.

          У вас всё дело именно в том что вы используете медиа-запрос по-умолчанию с свойством font-size: 0; для экранов меньше 680px. Других причин я не вижу, да и вообще ничего не вижу только могу гадать, а это не так просто делать по скрину.

      • Evgeniya:

        Вопрос решился просто font-size: 1

        Ответить
        • driver:

          Рад за вас, только зря «телепатировал» и огород городил с медиа-запросами ))), тогда уж правильнее в css использовать значения small, medium, large или относительный размер в единицах измерения (%, em, ex), наследовать значение родителя прописав inherit, или же вовсе не устанавливать размер шрифта при просмотре на мобильных устройствах.

          Все допустимые значения можете подсмотреть здесь

      • Evgeniya:

        Может это все кому-то поможет 🙂 Спасибо!

        Ответить
  9. Jack:

    Спасибо! )

    Ответить
  10. HardHardy:

    Спасибо!

    А как сделать, что бы первая вкладка сразу была открыта?

    Ответить
    • driver:

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

      <input id="tab1" type="radio" name="tabs" checked>

      Ответить
      • HardHardy:

        И в правду, прошу прощения. Видать при копировании в кмске друпала код сбился.

        Ответить
  11. Владимир:

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

    Ответить
  12. Mr.Happy:

    Огромное спасибо, очень помогла статья.

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

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