Загрузка страницы..
Адаптивные табы (вкладки)
В этой статье мы создадим адаптивную навигацию в виде табов.
Адаптивные табы (вкладки)
2016-05-14T01:05 14 мая 2016 01:05
Просмотров: 4500

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

Навигация в виде табов

Структура

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/



Комментарии: 0

Комментарий пока нет, стань первым!

Добавить комментарий

up
Яндекс.Метрика Яндекс.Метрик