От автора: Дополнительная навигация предназначена для тех пользователей, которым хотелось бы быстро просмотреть содержимое страницы и иметь возможность легко переходить от одного раздела страницы к другому.
Фиксированная навигация с эффектом плавной прокрутки, созданной при помощи jQuery. В создании этого эффекта нет ничего необычного, но этот прием пригодится вам для создания дополнительного меню, позволяющего быстро перемещаться по контенту страницы. Сейчас данный эффект можно увидеть на многих сайтах. Хорошим примером, который мне запомнился, является сайт Disqus For Websites. Удачным решением является анимация логотипа и двух кнопок с «призывом к действию» (call-to-action) при появлении фиксированной навигации.
Создание структуры
Мы создали элемент section #cd-intro, чтобы обернуть начальное изображение, подзаголовок и кнопку «призыв к действию».
Дополнительная навигация является ненумерованным списком, расположенным внутри элемента .cd-secondary-nav. Весь остальной контент расположен внутри элемента .cd-main-content.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<section id="cd-intro"> <div id="cd-intro-tagline"> <h1><!-- здесь расположен ваш подзаголовок --></h1> <a href="#0" class="cd-btn"><!-- здесь расположен текст для кнопки --></a> </div> </section> <div class="cd-secondary-nav"> <a href="#0" class="cd-secondary-nav-trigger">Menu<span></span></a> <!-- видимая кнопка на устройствах с маленьким экраном --> <nav> <ul> <li> <a href="#cd-placeholder-1"> <b>Services</b> <span></span><!-- иконка --> </a> </li> <!-- здесь расположены другие элементы --> </ul> </nav> </div> <!-- .cd-secondary-nav --> <main class="cd-main-content"> <section id="cd-placeholder-1" class="cd-section cd-container"> <!-- здесь расположен раздел с контентом--> </section> <!-- #cd-placeholder-1 --> <section id="cd-placeholder-2" class="cd-section cd-container"> <!-- здесь расположен раздел с контентом--> </section> <!-- #cd-placeholder-2 --> <!-- здесь расположены другие разделы --> </main> <!-- .cd-main-content --> |
Добавление стилей
Поскольку данный ресурс стал создаваться сначала под мобильные устройства, мы присвоили свойство position: fixed для ненумерованного списка внутри элемента .cd-secondary-nav и разместили его в правой нижней части окна просмотра. Когда пользователь нажимает на элемент .cd-secondary-nav-trigger, мы назначаем класс .is-visible для ненумерованного списка, меняя значение CSS3 параметра scale с 0 на 1.
Когда окно просмотра больше 1170px, мы скрываем элемент .cd-secondary-nav-trigger и меняем свойство position у ненумерованного списка с fixed на static, чтобы он был виден внутри элемента .cd-secondary-nav, сразу после элемента section#cd-intro.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.cd-secondary-nav ul { position: fixed; right: 5%; bottom: 20px; visibility: hidden; transform: scale(0); transform-origin: 100% 100%; transition: transform 0.3s, visibility 0s 0.3s; } .cd-secondary-nav ul.is-visible { visibility: visible; transform: scale(1); transition: transform 0.3s, visibility 0s 0s; } @media only screen and (min-width: 1170px) { .cd-secondary-nav ul { /* сброс значений у навигации */ position: static; width: auto; max-width: 100%; visibility: visible; transform: scale(1); } } .cd-secondary-nav-trigger { position: fixed; bottom: 20px; right: 5%; width: 44px; height: 44px; } @media only screen and (min-width: 1170px) { .cd-secondary-nav-trigger { display: none; } } |
Когда пользователь прокручивает страницу на расстояние, превышающее высоту элемента section#cd-intro, мы назначаем класс .is-fixed для элемента .cd-secondary-nav, меняя у него значение свойства position с relative на fixed и уменьшая его высоту, а затем мы добавляем класс .animate-children для анимирования дочерних элементов. Мы не можем здесь использовать лишь один класс из-за «бага» у браузера Firefox (CSS анимация перехода не срабатывает, когда у родительского элемента изменяется свойство position). Более подробно об этом говорится далее в разделе Обработка событий.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@media only screen and (min-width: 1170px) { .cd-secondary-nav.is-fixed { position: fixed; left: 0; top: 0; height: 70px; width: 100%; } .cd-secondary-nav li a { padding: 58px 40px 0 40px; transition: padding 0.2s; } .cd-secondary-nav li a span { transition: opacity 0.2s; } .cd-secondary-nav.animate-children li a { padding: 26px 30px 0 30px; } .cd-secondary-nav.animate-children li a span { opacity: 0; } } |
Нам также хотелось бы показывать логотип и кнопку «призыв к действию», когда дополнительная навигация будет зафиксирована. Для этого нам нужно объявить два класса: .is-hidden и .slide-in (первый класс применяется, когда пользователь прокручивает страницу дальше нижней границы элемента #cd-intro-tagline, второй – дальше верхней границы элемента .cd-secondary-nav).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@media only screen and (min-width: 1170px) { #cd-logo.is-hidden { /* назначаем фиксированное позиционирование и перемещаем за пределы окна просмотра (налево) */ opacity: 0; position: fixed; left: -20%; transition: left 0.3s, opacity 0.3s; } #cd-logo.is-hidden.slide-in { /* появляется, когда дополнительная навигация становится фиксированной */ left: 5%; opacity: 1; } .cd-btn.is-hidden { /* назначаем фиксированное позиционирование и перемещаем за пределы окна просмотра (направо) */ opacity: 0; position: fixed; right: -20%; transition: right 0.3s, opacity 0.3s; } .cd-btn.is-hidden.slide-in { /* появляется, когда дополнительная навигация становится фиксированной */ right: 5%; opacity: 1; } } |
Обработка событий
Когда пользователь прокручивает страницу дальше смещенной верхней границы дополнительной навигации, мы назначаем класс .is-fixed, чтобы изменить значение свойства position; мы добавляем класс .animate-children с задержкой в 50 мс (из-за бага в браузере Firefox) для того чтобы анимировать дочерние элементы. Таким образом, изменение значения свойства position не повлияет на эффект перехода, поскольку они будут происходить в разное время.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var secondaryNav = $('.cd-secondary-nav'), secondaryNavTopPosition = secondaryNav.offset().top; $(window).on('scroll', function(){ if($(window).scrollTop() > secondaryNavTopPosition ) { secondaryNav.addClass('is-fixed'); setTimeout(function() { secondaryNav.addClass('animate-children'); $('#cd-logo').addClass('slide-in'); $('.cd-btn').addClass('slide-in'); }, 50); } else { secondaryNav.removeClass('is-fixed'); setTimeout(function() { secondaryNav.removeClass('animate-children'); $('#cd-logo').removeClass('slide-in'); $('.cd-btn').removeClass('slide-in'); }, 50); } }); |
Автор: Claudia Romano
Источник: //codyhouse.co/
Редакция: Команда webformyself.
