Як створити меню в смужку з допомогою Flexbox

17

Від автора: завдяки flexbox сьогодні ми можемо з легкістю створювати по-справжньому привабливі і сучасні макети. У цьому уроці ми з вами розберемо інтерфейс, який нещодавно з’явився на сайті Google National Parks, а також дізнаємося, як flexbox допоможе нам покращити його.

І як завжди, перед зануренням давайте подивимося на кінцевий результат. Подивіться велику версію, так як ефект видно тільки на екранах з шириною більше 800px:

Наведіть курсор миші на посилання, щоб спрацював ефект.

Розмітка

Спершу давайте розберемо розмітку, яка буде лежати в основі цього макета. Необхідно створити блок div і помістити в нього 5 посилань. Можна використовувати будь-які відповідні теги. У кожній посиланням повинен бути div з класом overlay. Структура коду:

Title #1

Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.

Базові стилі

З розміткою закінчили. Тепер необхідно прописати базові стилі:

Самий зовнішній div повинен бути флекс-контейнером, а його висота має дорівнювати висоті екрана, тобто height: 100vh.

Всі посилання повинні бути однієї ширини (флекс-елементи). Для цього необхідно вказати посилання властивість flex: 1. Крім того, у всіх посилань буде фонове зображення по висоті вікна браузера. Також всіх посиланнях необхідно задати унікальний колір фону.

При наведенні курсору миші на посилання її розмір збільшується в 3 рази по відношенню до інших посиланнях. Робиться це шляхом зміни значення властивості flex у цільової посилання. На щастя для нас, це властивість можна анімувати. Ми можемо створити плавний перехід (майже у всіх сучасних браузерах).

Частина CSS коду нижче демонструє те, що ми тільки що описали:

.flex-wrapper {
display: flex;
height: 100vh;
}
.flex-wrapper a {
position: relative;
flex: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: flex .4s;
}
.flex-wrapper .one {
background-image: url(IMAGE_PATH);
background-color: red;
}
.flex-wrapper a:hover {
flex: 3;
}

Якщо тепер відкрити демо в браузер з підтримкою flexbox, ми побачимо:

Стилі перекривання шару

Наступним нашим кроком буде написання стилів для перекриває шару. Нам необхідно зробити:

Задати перекрывающему шару розміри батьківського посилання. Зробити це можна за допомогою абсолютного позиціонування по відношенню до найближчого батьків, вказавши при цьому нульові значення зміщень.

Шар накладення необхідно перетворити в флекс-контейнер, після чого ми зможемо центрувати його прямі дочірні елементи по горизонталі і вертикалі (тобто елемент .overlay-inner).

Необхідно додати перекрывающему шару сірий напівпрозорий фоновий колір при наведенні курсору миші на батьківську посилання.

Відповідні стилі:

.flex-wrapper .overlay {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: background-color .4s;
}
.flex-wrapper a:hover .overlay {
background-color: rgba(0, 0, 0, .5);
}

Внутрішня частина перекриває шару

Тепер необхідно стилізувати внутрішні частини шару накладення. За замовчуванням вони приховані і повинні з’являтися тільки при наведенні курсору миші на відповідну батьківську посилання. Однак відбуватися це буде не відразу, а з невеликою затримкою. Затримка дуже важлива. Якщо її не поставити, плавний перехід буде виглядати трохи страшно. Видаліть затримку і подивіться, як змінилося демо, щоб зрозуміти.

Підсумуємо: спочатку посилання стає більше, і тільки потім з’являється перекриває шар. Для створення слайд ефектів ми також використовували властивість translate3d(). Останнє, але не менш важливе – для запобігання ефекту миготіння в деяких браузерах ми використовували хак transform-style: preserve-3d (або щось схоже). Відповідні стилі:

.flex-wrapper .overlay-inner * {
visibility: hidden;
opacity: 0;
transform-style: preserve-3d;
}
.flex-wrapper .overlay h2 {
transform: translate3d(0, -60px, 0);
}
.flex-wrapper .overlay p {
transform: translate3d(0, 60px, 0);
}
.flex-wrapper a:hover .overlay-inner * {
opacity: 1;
visibility: visible;
transform: none;
transition: all .3s .3s;
}

Додаємо адаптивність

Сторінка добре виглядає на великих екранах, але, мабуть, на малих і навіть середніх екранах нам доведеться внести кілька змін. Наприклад, нам потрібно зробити:

Перевернути головну вісь флекс-контейнера за допомогою flex-direction: column, після чого флекс-елементи зміняться у вертикальне положення.

Відмінити всі плавні переходи і показувати перекривають елементи за замовчуванням.

Для настільних ПК медіа запити будуть виглядати наступним чином. Я використовував тільки дозвіл 800px, так як саме воно використовується в демо. Ви можете вибрати будь-яке інше.

@media screen and (max-width: 800px) {
.flex-wrapper {
flex-direction: column;
}
.flex-wrapper a:hover {
flex: 1;
}
.flex-wrapper a:hover .overlay {
background-color: transparent;
}
.flex-wrapper .overlay h2,
.flex-wrapper .overlay p {
opacity: 1;
visibility: visible;
transform: none;
}
}

Кінцевий варіант меню:

Підтримка в браузерах

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

Висновок

У цьому уроці ми дізналися трохи більше про flexbox, створивши стильне меню. Сподіваюся, вам сподобався наш макет, і ви почерпнете з нього що-небудь у свої наступні проекти! Якщо будете створювати схожий макет, не забудьте розповісти нам про ваш підхід (чистий CSS або JS).