Дополнительная фиксированная навигация

Дополнительная фиксированная навигация

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

Фиксированная навигация с эффектом плавной прокрутки, созданной при помощи jQuery. В создании этого эффекта нет ничего необычного, но этот прием пригодится вам для создания дополнительного меню, позволяющего быстро перемещаться по контенту страницы. Сейчас данный эффект можно увидеть на многих сайтах. Хорошим примером, который мне запомнился, является сайт Disqus For Websites. Удачным решением является анимация логотипа и двух кнопок с «призывом к действию» (call-to-action) при появлении фиксированной навигации.

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

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

Мы создали элемент section #cd-intro, чтобы обернуть начальное изображение, подзаголовок и кнопку «призыв к действию».
Дополнительная навигация является ненумерованным списком, расположенным внутри элемента .cd-secondary-nav. Весь остальной контент расположен внутри элемента .cd-main-content.

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

Поскольку данный ресурс стал создаваться сначала под мобильные устройства, мы присвоили свойство 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.

Когда пользователь прокручивает страницу на расстояние, превышающее высоту элемента section#cd-intro, мы назначаем класс .is-fixed для элемента .cd-secondary-nav, меняя у него значение свойства position с relative на fixed и уменьшая его высоту, а затем мы добавляем класс .animate-children для анимирования дочерних элементов. Мы не можем здесь использовать лишь один класс из-за «бага» у браузера Firefox (CSS анимация перехода не срабатывает, когда у родительского элемента изменяется свойство position). Более подробно об этом говорится далее в разделе Обработка событий.

Нам также хотелось бы показывать логотип и кнопку «призыв к действию», когда дополнительная навигация будет зафиксирована. Для этого нам нужно объявить два класса: .is-hidden и .slide-in (первый класс применяется, когда пользователь прокручивает страницу дальше нижней границы элемента #cd-intro-tagline, второй – дальше верхней границы элемента .cd-secondary-nav).

Обработка событий

Когда пользователь прокручивает страницу дальше смещенной верхней границы дополнительной навигации, мы назначаем класс .is-fixed, чтобы изменить значение свойства position; мы добавляем класс .animate-children с задержкой в 50 мс (из-за бага в браузере Firefox) для того чтобы анимировать дочерние элементы. Таким образом, изменение значения свойства position не повлияет на эффект перехода, поскольку они будут происходить в разное время.

Автор: Claudia Romano

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Фреймворк CakePHP на примере создания корпоративного сайта

Изучите исчерпывающий видеокурс на тему работы с фреймворком CakePHP.

Научиться

Метки: ,

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

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

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

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

Ваш 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