От автора: Полноэкранное меню, которое заменяет контент страницы, выталкивая его за пределы экрана.
Недавно мы увидели красивый редизайн сайта Hello Monday. Наше внимание привлекла полноэкранная навигация: она полностью заменяет текущий контент, выталкивая его за пределы видимости. Это и вдохновило нас на создание нашего необычного демо-примера!
Вот быстрый набросок конечного результата:
Создание структуры
HTML структура состоит из трех основных элементов: элемент <main> – содержит видимый контент, элемент div.cd-nav – обертка для навигации и кнопка меню с классом .cd-nav-trigger.
Элемент с классом .cd-nav состоит из двух элементов div.cd-half-block. В первом содержится навигация (.cd-primary-nav), а во втором – контактная информация (.cd-contact-info).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="cd-nav" class="cd-nav"> <div class="cd-navigation-wrapper"> <div class="cd-half-block"> <h2>Navigation</h2> <nav> <ul class="cd-primary-nav"> <li><a href="#0" class="selected">The team</a></li> <!-- здесь идут элементы списка --> </ul> </nav> </div><!-- .cd-half-block --> <div class="cd-half-block"> <address> <ul class="cd-contact-info"> <li><a href="mailto:email">email</a></li> <!-- здесь идет другая контактная информация --> </ul> </address> </div> <!-- .cd-half-block --> </div> <!-- .cd-navigation-wrapper --> </div> <!-- .cd-nav --> |
Элемент с классом .cd-nav-trigger содержит элемент span.cd-nav-icon, который используется для создания иконки-гамбургера (сам элемент является центральной линией, а его псевдо-элементы ::after и ::before используются для создания верхней и нижней линий), а также элемент svg, который используется для создания круга, показывающего процесс загрузки.
|
1 2 3 4 5 6 7 |
<a href="#cd-nav" class="cd-nav-trigger">Menu <span class="cd-nav-icon"></span> <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54"> <circle fill="transparent" stroke="#66788f" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle> </svg> </a> |
Добавление стилей
Когда пользователь кликает по элементу .cd-nav-trigger, к элементу body добавляется класс .navigation-is-open: данный класс отвечает за переключение иконки-гамбургера и появление меню.
Что касается иконки-гамбургера, то ее анимация может быть разделена на три части:
Трансформация иконки-гамбургера в стрелку: псевдо-элементы .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 переходы. Вот небольшая презентация всего процесса:
|
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 39 40 41 42 |
.cd-nav-trigger { transition: transform 0.5s; } .navigation-is-open .cd-nav-trigger { /* поворот переключателя, когда навигация становится видимой */ transform: rotate(180deg); } .cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after { /* верхняя и нижняя линии иконки меню */ width: 100%; height: 100%; transition: transform 0.5s, width 0.5s, top 0.3s; } .cd-nav-trigger .cd-nav-icon::before { transform-origin: right top; transform: translateY(-6px); } .cd-nav-trigger .cd-nav-icon::after { transform-origin: right bottom; transform: translateY(6px); } .navigation-is-open .cd-nav-trigger .cd-nav-icon::after, .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { /* анимация стрелки --> превращение из гамбургера в стрелку */ width: 50%; transition: transform 0.5s, width 0.5s; } .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { transform: rotate(45deg); } .navigation-is-open .cd-nav-trigger .cd-nav-icon::after { transform: rotate(-45deg); } .cd-nav-trigger circle { /* анимация границы круга */ transition: stroke-dashoffset 0.4s 0s; } .navigation-is-open .cd-nav-trigger circle { stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s 0.3s; } |
Для достижения эффекта появления меню элемент <main> и элемент с классом .cd-navigation-wrapper смещаются (вдоль оси X) на 100%. Для создания более реалистичного эффекта выталкивания, мы использовали функцию cubic bezier в качестве временной функции для перехода. Данная кривая позволяет вам установить 4 параметра (опорные точки кривой), чтобы создать оптимальную кривую ускорения для свойства, которое изменяется во время перехода.
Есть инструменты (наподобие //cubic-bezier.com), которые позволяют вам настроить кривую, как вам нужно, и посмотреть предварительный результат перед непосредственным использованием в коде (вы также легко можете экспортировать конечные параметры кривой).
Вот небольшая презентация разницы между настроенной временной функцией cubic-bezier и обычной линейной функцией:
Обработка событий
Мы использовали jQuery, чтобы слушать событие клика по элементу с классом .cd-nav-trigger и соответственно добавлять/удалять класс .navigation-is-open.
Автор: Sebastiano Guerriero
Источник: //codyhouse.co/
Редакция: Команда webformyself.
