Простий ефект меню YouTube

19

Від автора: підручник про те, як відтворити ефект маленького меню зліва на сайті YouTube. Ідея полягає в тому, щоб іконка зісковзувала вправо, показуючи при цьому списку пунктів меню.

Сьогодні ми покажемо вам, як відтворити ефект маленького меню, яке можна бачити зліва на YouTube при перегляді відео (де написано «Гід»). Меню складається з маленької іконки, ярлики та списку пунктів, який з’являється при клацанні по мітці або іконці. При клацанні іконка меню ковзає вправо, а мітка зсувається вгору при послідовному появі пунктів списку. Щоб стало цікавіше, ми додамо до нього ще трохи стилів і ефектів.

Простий ефект меню YouTubeПростий ефект меню YouTube

РОЗМІТКА

Для HTML ми застосуємо елемент nav, а всередину додамо div, який буде містити іконку меню і мітку. Для пунктів меню використовуємо ненумерованний список:

Account
  • Xavier Densmore
  • Videos
  • Favorites
  • Subscriptions
  • Downloads
  • Settings
  • Logout

У кожного пункту меню буде маленька іконка, тому ми призначимо їм усім різні класи. Використовувані нами іконки взяті з IcoMoon, а також з допомогою цього чудового програми створено власний набір іконок. Давайте поглянемо на CSS.

CSS

Зверніть увагу, що в CSS немає ніяких префіксів, але в файлах вони будуть. Спочатку включимо шрифт-іконку:

@font-face {
font-family: ‘icomoon’;
src:url(‘../fonts/icomoon.eot’);
src:url(‘../fonts/icomoon.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/icomoon.woff’) format(‘woff’),
url(‘../fonts/icomoon.ttf’) format(‘truetype’),
url(‘../fonts/icomoon.svg#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

У основного контейнера nav буде кілька загальних стилів, начебто розміру шрифту, висоти рядка, кольору і розмірів. Ми хочемо, щоб він був гнучким, але не потрібно, щоб він ставав занадто великим або маленьким, тому призначимо йому максимальну і мінімальну ширину:

.dr-menu {
width: 100%;
max-width: 400px;
min-width: 300px;
position: relative;
font-size: 1.3 em;
line-height: 2.5;
font-weight: 400;
color: #fff;
padding-top: 2em;
}

Розділ, що містить діапазон іконок меню і посилання на мітку, буде абсолютно позиціонується, і ми встановимо курсор у значення pointer. Йому потрібно z-індекс, щоб гарантувати, що невпорядкований список не залишиться зверху нього:

.dr-menu > div {
cursor: pointer;
position: absolute;
width: 100%;
z-index: 100;
}

Діапазон іконок меню запуску також абсолютно позиціонуємо і додамо перехід:

.dr-menu > div .dr-icon {
top: 0;
left: 0;
position: absolute;
font-size: 150%;
line-height: 1.6;
padding: 0 10px;
transition: all 0.4 s ease;
}

При клацанні на розділ ми додамо до nav клас під назвою «dr-menu-open». Іконка меню тоді ковзне вліво, і ми садимо її на величину її власної ширини так, щоб вона гарно поверталася на місце без перетікання:

.dr-menu.dr-menu-open > div .dr-icon {
color: #60a773;
left: 100%;
transform: translateX(-100%);
}

В кінці CSS додамо класи іконок з IcoMoon. В діапазоні меню іконка буде трохи відрізнятися, і ми застосуємо псевдоклас :after для додавання маленького трикутника. Отже, визначимо таким чином:

.dr-menu > div .dr-icon:after {
content: «\e008»;
position: absolute;
font-size: 50%;
line-height: 3.25;
left: -10%;
opacity: 0;
}

Іконка буде позиціонована абсолютно, і ми поставимо її на місце, посунувши на 10% вліво. Спочатку непрозорість встановлена на 0, тому що нам не потрібно її показувати, коли меню закрито. При відкритті меню вона стає видимою:

.dr-menu.dr-menu-open > div .dr-icon:after {
opacity: 1;
}

Мітка, яка є посиланням в нашому HTML, отримає загальні стилі і відступ, щоб перебувати поруч з іконкою меню. Ми також додамо перехід, тому що хочемо анімувати її при відкритті меню, що і зробимо з допомогою перенесення на вісь Y:

.dr-menu > div .dr-label {
padding-left: 3em;
position: relative;
display: block;
color: #60a773;
font-size: 0.9 em;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 2.75;
transition: all 0.2 s ease-in;
}
.dr-menu.dr-menu-open > div .dr-label {
transform: translateY(-90%);
}

Ненумерованний список спочатку буде невидимий, так як його непрозорість дорівнює 0:

.dr-menu ul {
padding: 0;
margin: 0 3em 0 0;
list-style: none;
opacity: 0;
position: relative;
z-index: 0;
pointer-events: none;
transition: opacity 0s linear 205ms;
}

Потрібно, щоб при відкритті меню список ставав видимим і з великим z-індексом, щоб його не закривав div:

.dr-menu.dr-menu-open ul {
opacity: 1;
z-index: 200;
pointer-events: auto;
transition: opacity 0s linear 0s;
}

Для відкриття і закриття меню є два переходи. При відкритті нам потрібно, щоб воно відкривалося без затримки, а при закритті, тобто видалення класу, потрібно, щоб воно відбувалося із затримкою. Ця затримка визначається затримкою останнього пункту списку, як ми це побачимо незабаром. Пункти меню теж будуть невидимі, і ми встановимо перехід непрозорості:

.dr-menu ul li {
display: block;
margin: 0 0 5px 0;
opacity: 0;
transition: opacity 0.3 s ease;
}
.dr-menu.dr-menu-open ul li {
opacity: 1;
}

Тепер кожен пункт списку буде з’являтися з різною затримкою: перший проявиться відразу ж, а останній – в кінці:

.dr-menu.dr-menu-open ul li:nth-child(2) {
transition-delay: 35ms;
}
.dr-menu.dr-menu-open ul li:nth-child(3) {
transition-delay: 70ms;
}
.dr-menu.dr-menu-open ul li:nth-child(4) {
transition-delay: 105ms;
}
.dr-menu.dr-menu-open ul li:nth-child(5) {
transition-delay: 140ms;
}
.dr-menu.dr-menu-open ul li:nth-child(6) {
transition-delay: 175ms;
}
.dr-menu.dr-menu-open ul li:nth-child(7) {
transition-delay: 205ms;
}

У посилань буде відступ, і ми встановимо їх як inline-block:

.dr-menu ul li a {
display: inline-block;
padding: 0 20px;
color: #fff;
}

І змінимо колір при проведенні мишею:

.dr-menu ul li a:hover {
color: #60a773;
}

І останнє, але не менш важливе – давайте визначимо псевдоелементи іконок:

.dr-icon:before,
.dr-icon:after {
position: relative;
font-family: ‘icomoon’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.dr-menu ul .dr-icon:before {
margin-right: 15px;
}
.dr-icon-bullhorn:before {
content: «\e000»;
}
.dr-icon-camera:before {
content: «\e002»;
}
.dr-icon-heart:before {
content: «\e003»;
}
.dr-icon-settings:before {
content: «\e004»;
}
.dr-icon-switch:before {
content: «\e005»;
}
.dr-icon-download:before {
content: «\e006»;
}
.dr-icon-user:before {
content: «\e001»;
}
.dr-icon-menu:before {
content: «\e007»;
}

Ось і всі стилі. Займемося JavaScript’ом.

JAVASCRIPT

Ми створимо невеликий скрипт, який подбає про функціональності меню. При клацанні на розділ запуску потрібно, щоб оболонка меню отримувала клас «dr-menu-open». Так як ми будемо анімувати мітку і іконку меню вправо, потрібно, щоб закриття відбувалося тільки при натисканні на іконку меню, як у YouTube’е:

var YTMenu = (function() {
function init() {
[].slice.call( document.querySelectorAll( ‘.dr-menu’ ) ).forEach( function( el, i ) {
var trigger = el.querySelector( ‘div.dr-trigger’ ),
icon = trigger.querySelector( ‘span.dr-icon-menu’ ),
open = false;
trigger.addEventListener. ( ‘click’, function( event ) {
if( !open ) {
el.className += ‘dr-menu-open’;
open = true;
}
}, false );
icon.addEventListener. ( ‘click’, function( event ) {
if( open ) {
event.stopPropagation();
open = false;
el.className = el.className.replace(/\bdr-menu-open\b/,»);
return false;
}
}, false );
} );
}
init();
})();

От і все! Сподіваюся, вам сподобався цей підручник і виявився корисний!