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

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

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

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

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

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

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

HTML структура состоит из трех основных элементов: элемент <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>
<!-- здесь идут элементы списка -->
</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, который используется для создания круга, показывающего процесс загрузки.

<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 переходы. Вот небольшая презентация всего процесса:

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

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

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

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

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

Автор: Sebastiano Guerriero

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

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

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

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

Получить

Метки: , ,

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree