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

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

Структура

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;
	/*...*/
}

Источник статьи: https://codyhouse.co/gem/responsive-tabbed-navigation/