Полноэкранная навигация

jQuery 14.05.2017

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.

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

Вот быстрый прототип конечного эффекта, который мы собрали вместе:

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

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

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

<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>
 <!-- list items here -->
 </ul>
 </nav>
 </div><!-- .cd-half-block -->
 
 <div class="cd-half-block">
 <address>
 <ul class="cd-contact-info">
 <li><a href="mailto:info@myemail.co">info@myemail.co</a></li>
 <!-- other contact info here -->
 </ul>
 </address>
 </div> <!-- .cd-half-block -->
 </div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->

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

<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, в тело добавляется класс .navigation-is-open: этот класс запускает анимацию значка гамбургера и вход в меню.

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

Преобразование значка гамбургера в стрелку: .cd-nav-icon ::after и .cd-nav-icon::before того, как псевдоэлементы будут повернуты на 45 / -45deg (используя в качестве начала координат правый край Элемента), и их ширина уменьшается до 50%;
Поворот всего .cd-nav-icon (180deg);
Эффект загрузки окружности: значение stroke-dashoffset элемента circle установлено равным нулю (изначально у него есть stroke-dasharray = "157 157" и stroke-dashoffset = "157", где 157 - значение окружности).

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

Вот быстрая анимация, показывающая весь процесс:

.cd-nav-trigger {
 transition: transform 0.5s;
}
.navigation-is-open .cd-nav-trigger {
 /* rotate trigger when navigation becomes visible */
 transform: rotate(180deg);
}
.cd-nav-trigger .cd-nav-icon::before, 
.cd-nav-trigger .cd-nav-icon:after {
 /* upper and lower lines of the menu icon */
 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 {
 /* animate arrow --> from hamburger to arrow */
 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 {
 /* circle border animation */
 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%. Чтобы создать более реалистичный эффект нажатия, мы использовали кубическую кривую Безье в качестве временной функции перехода. Эта кривая позволяет вам установить 4 параметра (контрольные точки кривой), чтобы создать оптимальную кривую ускорения для свойства, которое изменяется во время вашего перехода.

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

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