От автора: Удобная навигация по вкладкам, оптимизированная под мобильные устройства, с поддержкой горизонтального и вертикального расположения меню.
Навигации по вкладкам (табам) очень удобны, когда вам нужно структурировать большое количество дополнительного контента. Обычно вкладки (табы) используются на странице о товаре для размещения, например, информации о вариантах доставки или сведений о материале, из которого изготовлен товар, и т.д. Еще вкладки используются в панелях управления, чтобы пользователи могли быстро переключаться с одной панели на другую.
Код, позволяющий создать вкладки, – очень простой. По большей части используется CSS, плюс немного jQuery, чтобы создать анимацию для параметра высоты у контента. Интересным является то, как мы подошли к разработке пользовательского опыта взаимодействия на устройствах с маленьких экраном: для того чтобы дать пользователям столько кнопок, сколько они захотят, мы решили организовать горизонтальную прокрутку навигации на устройствах с маленьким экраном, вместо того, чтобы полностью скрывать ее или создавать выпадающее меню.
В нашем примере использован набор иконок Vicons, созданный талантливым дизайнером Виктором Эриксоном (Victor Erixon).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Создание структуры
HTML разметка состоит из 2 неупорядоченных списков (.cd-tabs-navigation и .cd-tabs-content) – первый из них является навигацией, а второй – контентом. Оба списка обернуты в элемент div с классом .cd-tabs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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, чтобы добиться плавной прокрутки на устройствах с сенсорным экраном.
|
1 2 3 4 5 |
.cd-tabs nav { overflow: auto; -webkit-overflow-scrolling: touch; /*...*/ } |
Оставшаяся часть кода на CSS и jQuery является достаточно легкой, поэтому вы можете скачать исходники и самостоятельно поэкспериментировать. 😉
Автор: Sebastiano Guerriero
Источник: //codyhouse.co/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Комментарии (1)