Отзывчивая навигация по вкладкам (табам)

Отзывчивая навигация по вкладкам

От автора: Удобная навигация по вкладкам, оптимизированная под мобильные устройства, с поддержкой горизонтального и вертикального расположения меню.

Навигации по вкладкам (табам) очень удобны, когда вам нужно структурировать большое количество дополнительного контента. Обычно вкладки (табы) используются на странице о товаре для размещения, например, информации о вариантах доставки или сведений о материале, из которого изготовлен товар, и т.д. Еще вкладки используются в панелях управления, чтобы пользователи могли быстро переключаться с одной панели на другую.

скачать исходникидемо

Код, позволяющий создать вкладки, – очень простой. По большей части используется CSS, плюс немного jQuery, чтобы создать анимацию для параметра высоты у контента. Интересным является то, как мы подошли к разработке пользовательского опыта взаимодействия на устройствах с маленьких экраном: для того чтобы дать пользователям столько кнопок, сколько они захотят, мы решили организовать горизонтальную прокрутку навигации на устройствах с маленьким экраном, вместо того, чтобы полностью скрывать ее или создавать выпадающее меню.

В нашем примере использован набор иконок Vicons, созданный талантливым дизайнером Виктором Эриксоном (Victor Erixon).

Создание структуры

HTML разметка состоит из 2 неупорядоченных списков (.cd-tabs-navigation и .cd-tabs-content) – первый из них является навигацией, а второй – контентом. Оба списка обернуты в элемент div с классом .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 медиа-запросы для изменения горизонтального расположения навигации на вертикальное и наоборот. Поскольку мы выбрали подход «cначала мобильные» (mobile-first), элемент nav имеет свойство overflow:auto, чтобы скрыть часть неупорядоченного списка, ширина которого выходит за границы этого элемента. Кроме того, мы использовали свойство -webkit-overflow-scrolling: touch, которое всегда применяется к элементу nav, чтобы добиться плавной прокрутки на устройствах с сенсорным экраном.

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

Оставшаяся часть кода на CSS и jQuery является достаточно легкой, поэтому вы можете скачать исходники и самостоятельно поэкспериментировать. ;)

Автор: Sebastiano Guerriero

Источник: http://codyhouse.co/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

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

Комментарии (1)

  1. Михаил

    Хорошая статья!
    Спасибо.
    Но вот вопрос который меня терзает:
    Как применить эти табы, к расширению joomshopping?
    А именно: я редактирую файл product_default.php и у меня ни как не получается настроить эти табы…
    Если есть желающие, оказать помощь, пишите в личку. Очень надеюсь на вашу помошь.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree