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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Добавление стилей

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

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

Автор: Sebastiano Guerriero

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: , ,

Похожие статьи:

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

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

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

  1. Михаил

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree