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

demosourse

В этом уроке мы создадим адаптивную навигацию в виде табов.

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

Структура

HTML структура будет представлять собой 2 ненумерованных списка (.cd-tabs-navigation и .cd-tabs-content). Первый для навигации, второй для контента. Оба элемента будут помещены в контейнер .cd-tabs.

<div class="cd-tabs">
	<nav>
		<ul class="cd-tabs-navigation">
			<li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>

			<li><!-- ... --></li>
		</ul> <!-- cd-tabs-navigation -->
	</nav>

	<ul class="cd-tabs-content">
		<li data-content="inbox" class="selected">
			<p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

			<p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
		</li>

		<li><!-- ... --></li>
	</ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->

Стили

Для обеспечения адаптивности мы воспользуемся CSS медиа запросами. При отображении на мобильном устройстве, элемент <nav> спрячем все не помещающиеся табы overflow:auto. Далее добавляем возможность прокрутки по ним -webkit-overflow-scrolling: touch.

.cd-tabs nav {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/*...*/
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/responsive-tabbed-navigation/
Перевел: Станислав Протасевич
Урок создан: 31 Марта 2016
Просмотров: 26645
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^