Повноекранна висувається навігація на CSS та jQuery

20.02.2017

Від автора: Повноекранне меню, яке замінює вміст сторінки, виштовхуючи його за межі екрану.

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

Ось швидкий начерк кінцевого результату:

Створення структури

HTML структура складається з трьох основних елементів: елемент – містить видимий контент, елемент div.cd-nav – обгортка для навігації і кнопка меню з класом .cd-nav-trigger.

Елемент з класом .cd-nav складається з двох елементів div.cd-half-block. У першому міститься навігація (.cd-primary-nav), а в другому – контактна інформація (.cd-contact-info).

Navigation

The team

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

Додавання стилів

Коли користувач клікає по елементу .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.5 s;
}
.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.5 s, width 0.5 s, top 0.3 s;
}
.cd-nav-trigger .cd-nav-icon::before {
transform-origin: top right;
transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
transform-origin: bottom right;
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.5 s, width 0.5 s;
}
.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.4 s 0s;
}
.navigation-is-open .cd-nav-trigger circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.4 s 0.3 s;
}

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

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

Ось невелика презентація різниці між налаштованої тимчасової функцією cubic-bezier і звичайною лінійною функцією: