Полноэкранная выдвигающаяся навигация на CSS и jQuery

Полноэкранная выдвигающаяся навигация на CSS и jQuery

От автора: Полноэкранное меню, которое заменяет контент страницы, выталкивая его за пределы экрана.

Недавно мы увидели красивый редизайн сайта Hello Monday. Наше внимание привлекла полноэкранная навигация: она полностью заменяет текущий контент, выталкивая его за пределы видимости. Это и вдохновило нас на создание нашего необычного демо-примера!

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

Вот быстрый набросок конечного результата:

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

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

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

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

HTML структура состоит из трех основных элементов: элемент <main> – содержит видимый контент, элемент div.cd-nav – обертка для навигации и кнопка меню с классом .cd-nav-trigger.

Элемент с классом .cd-nav состоит из двух элементов div.cd-half-block. В первом содержится навигация (.cd-primary-nav), а во втором – контактная информация (.cd-contact-info).

Элемент с классом .cd-nav-trigger содержит элемент span.cd-nav-icon, который используется для создания иконки-гамбургера (сам элемент является центральной линией, а его псевдо-элементы ::after и ::before используются для создания верхней и нижней линий), а также элемент svg, который используется для создания круга, показывающего процесс загрузки.

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

Когда пользователь кликает по элементу .cd-nav-trigger, к элементу body добавляется класс .navigation-is-open: данный класс отвечает за переключение иконки-гамбургера и появление меню.

Что касается иконки-гамбургера, то ее анимация может быть разделена на три части:

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

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

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

Трансформация иконки-гамбургера в стрелку: псевдо-элементы .cd-nav-icon::after и .cd-nav-icon::before поворачиваются на 45/-45deg (в качестве значения для свойства transform-origin указывается правый край элемента) и их ширина уменьшается на 50%;

Вращение всего элемента с классом .cd-nav-icon (180deg);

Создание эффекта круга загрузки: значение для stroke-dashoffset у круга загрузки ставится равным нулю (изначально, элемент круга имеет следующие свойства: stroke-dasharray=”157 157” и stroke-dashoffset=”157″, где значение 157 является длиной окружности).

Для достижения плавной анимации использовались CSS3 переходы. Вот небольшая презентация всего процесса:

Для достижения эффекта появления меню элемент <main> и элемент с классом .cd-navigation-wrapper смещаются (вдоль оси X) на 100%. Для создания более реалистичного эффекта выталкивания, мы использовали функцию cubic bezier в качестве временной функции для перехода. Данная кривая позволяет вам установить 4 параметра (опорные точки кривой), чтобы создать оптимальную кривую ускорения для свойства, которое изменяется во время перехода.

Есть инструменты (наподобие http://cubic-bezier.com), которые позволяют вам настроить кривую, как вам нужно, и посмотреть предварительный результат перед непосредственным использованием в коде (вы также легко можете экспортировать конечные параметры кривой).

Вот небольшая презентация разницы между настроенной временной функцией cubic-bezier и обычной линейной функцией:

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

Мы использовали jQuery, чтобы слушать событие клика по элементу с классом .cd-nav-trigger и соответственно добавлять/удалять класс .navigation-is-open.

Автор: Sebastiano Guerriero

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

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

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

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

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

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

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

Получить

Метки: , ,

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

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

Комментарии 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