Навігаційне меню з використанням Flexbox

Трохи flex та box

Всі ми давно вже знаємо, що як тільки наш улюблений браузер Internet Explorer 9 вийде з чергового кола болісної підтримки - Flexbox нарешті займе свою нішу.

Практика та короткі відомості:

Теорія:

Довідники:

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

Так, IE10 підтримується старий синтаксис, але для Autoprefixer це не проблема.

можна

Угоди

Для того, щоб ми з вими були на одній хвилі, я нагадаю про те, які угоди та інструменти я використовую:

Ах, як хотілося б просто скопіювати код із проекту, але ні — я використовую HTML-препроцесор Jade, синтаксис якого ґрунтується на іденції і може бути не зрозумілий читачеві. А ще highlight.js не має підтримки синтаксису. Прийде копіювати вже скомпільовану версію.

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

Тепер настав час звернути увагу на клас area, який я вказав і відзначив у розмітці вище. Справа в тому, що я не вказую щоразу розмір контейнера — для цього я маю цей клас. Його властивості мають такий вигляд:

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

1. Зрозуміло, що всі змінні ініціалізовані раніше, просто я не вказую це у статті, бо сенсу в цьому немає.

2. Тіні генерує бібліотека material shadows, яку можна встановити, використовуючи менеджер пакетів Bower: bower i --save-dev material-shadows .

Давайте відвернемося від рядків суворого коду і подивимося, щоробить властивість justify-content. Це зображення показує те, що було:

А тепер подивіться на те, що сталося:

Непогано, правда? Якби ми не використовували Flexbox, довелося б додавати властивість float, як мінімум селекторам brand, toggle, list та item. Причому не просто додавати властивості, а стежити, щоб вони нормально відображалися в різних умовах.

Стилізація основних елементів

Приступимо до базової (візуальної) стилізації основних елементів нашого компонента.

Список пунктів меню

Спочатку необхідно визначити базові стилі для пунктів меню:

Слід трохи пояснити це простирадло коду перед тим, як йти далі до інших елементів нашого компонента.

По-перше, ми вказуємо селектору list стати flex-контейнером, у якого головна вісь є горизонтальною та однорядковою, а також елементи розташовуються по центру поперечної осі.

По-третє, про всяк випадок вказуємо пункту меню розмір шрифту, оскільки іноді може піти негаразд.

Перемикач стану

Для зручності приховаємо список пунктів меню, змінивши значення властивості dispaly на none .

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

Займемося іконкою гамбургера.

Я людина лінива і щоразу, коли робиться щось тривіальне і рутинне — у мене відразу ж виникає думка винести це в модуль, щоб позбутися копіювання стилів із проекту до проекту. У нашому випадку модулем може бути less-файл, який містить якісь домішки. Так народилася невелика бібліотека hamburger-icon, яка просто генерує іконку гамбургера та дозволяє її анімувати.

Кмітливий читач здогадався, що залишаєтьсятільки підключити цю бібліотеку до проекту та викликати пару домішок. Так ми й зробимо:

Відмінно, тепер можна прибрати з очей геть цю кнопку і зайнятися логотипом. Поки що просто змінимо значення властивості display у селектора toggle на none. До цього ми ще повернемось.

У цій частині статті все просто. Потрібно лише розуміти, що логотип може бути картинкою або ж у бюджетній версії — текстом.

Відразу зазначу, що варіант з картинкою розглядатися не буде, тому що там потрібно лише вказати зображення в background-image і скоригувати значення якості margin за своїми розмірами.

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

У цьому базова стилізація закінчується.

Коригування поведінки елементів

Переходимо до нормалізації відображення нашого компонента меню навігації. З логічних міркувань, необхідно виконати такі умови:

  • Логотип повинен завжди відображатися.
  • Кнопка перемикання стану списку пунктів меню повинна бути помітна лише на пристроях з невеликим екраном.
  • Список пунктів меню повинен переховуватись на маленьких пристроях і завжди відображатись на великих.

Тут нам знадобиться принципспочатку мобільні (Mobile First).

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

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

А ось зараз ми спочатку приховуємо список пунктів меню і відображаємо його тільки тоді, коли ширина екрана буде більшою за необхідну.

Залишилося ще трохи.

Прокручування списку

Небагато подумавши, можна дійти наступного сценарію в коді:

Насамперед, необхідно заборонити перенесення рядків:

Далі потрібно створити медіавираз, стилі всередині якого діятимуть тільки до зазначеної точки:

Трохи докладніше про це медіавираження:

  • Властивість position: fixed дозволяє абсолютно позиціонувати наше меню, щоб не «відсувати» блоки нижче за нього.
  • Властивість overflow-y: hidden приховує все зайве зовні, а властивість overflow-x: auto дозволяє браузеру за бажання відображати повзунок скролла.
  • Так як у нас абсолютне позиціонування, необхідно вказати колір фону цього блоку.

1. Якщо вас не бентежить те, що нижчі блоки можуть зрушуватися вниз, то всі помічені властивості можна прибрати.

Демонстрація

Отже, якщо ви все ж таки догортали або навіть дочитали до цього моменту, то ось вам гіфка, що демонструє працездатність того, що ми тут накодували:

Зрозуміло, робочий приклад можна подивитися та покликати на CodePen.

Сподіваюсь вам сподобалось.

Це круто! Справді, Flexbox - це те, чого раніше не вистачало для простого та логічного керування блоками макета. Бажаєте змінити орієнтацію блоку щодо осі Y чи X? — лише одна властивість і все готове. Бажаєте максимально рівномірно розподіляти блоки за доступною шириною? - Знову одна властивість і все готове.

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

Затев додатках, написаних на NW.js його можна використовувати скільки завгодно.

Чим частіше п'ю каву, тим частіше пишу статті.