Чуйна навігація по вкладках (табам)

20

Від автора: Зручна навігація по вкладках, оптимізована під мобільні пристрої з підтримкою горизонтального і вертикального розташування меню.

Навігації вкладками (табам) дуже зручні, коли вам потрібно структурувати велику кількість додаткового контенту. Зазвичай вкладки (таби) використовуються на сторінці про товар для розміщення, наприклад, інформацією про варіанти доставки або дані про матеріал, з якого виготовлений товар, і т. д. Ще вкладки використовуються в панелі керування, щоб користувачі могли швидко переключатися з однієї панелі на іншу.

Чуйна навігація по вкладках (табам)Чуйна навігація по вкладках (табам)

Код, що дозволяє створити вкладки, – дуже простий. Здебільшого використовується CSS, плюс трохи jQuery, щоб створити анімацію для параметра висоти у контенту. Цікавим є те, як ми підійшли до розробки користувацького досвіду взаємодії на пристроях з маленьких екраном: для того щоб дати користувачам стільки кнопок, скільки вони захочуть, ми вирішили організувати горизонтальну прокрутку навігації на пристроях з маленьким екраном, замість того, щоб повністю приховувати її або створити випадаюче меню.

У нашому прикладі використаний набір іконок Vicons, створений талановитим дизайнером Віктором Еріксоном (Victor Erixon).

Чуйна навігація по вкладках (табам)

Створення структури

HTML-розмітка складається з 2 невпорядкованих списків.cd-tabs-navigation і .cd-tabs-content) – перший з них є навігацією, а другий – контентом. Обидва списку обгорнуті в елемент div з класом .cd-tabs.

  • Inbox
  • 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?

    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?

Додавання стилів

Ми використовували CSS медіа-запити для зміни горизонтального розташування навігації на вертикальне і навпаки. Оскільки ми вибрали підхід «спочатку мобільні» (mobile-first), елемент nav має властивість overflow:auto, щоб приховати частину неупорядкованого списку, ширина якого виходить за межі цього елемента. Крім того, ми використовували властивість -webkit-overflow-scrolling: touch, яке завжди застосовується до елемента nav, щоб домогтися плавної прокрутки на пристроях з сенсорним екраном.

Чуйна навігація по вкладках (табам)

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

Частина коду CSS і jQuery є досить легкою, тому ви можете завантажити вихідні коди і самостійно поекспериментувати. Чуйна навігація по вкладках (табам)