Foundation 6: Новий компонент меню

28

Від автора: якщо ви вже користувалися Foundation, то могли помітити, що компоненти меню і навігації трохи мізерні. Якщо вам необхідно було зробити меню з іконками або горизонтальне меню, то вам доводилося використовувати саме компоненти під кожен випадок (а якщо вам хотілося щось ще, то їх потрібно було налаштовувати під себе).

З виходом Foundation 6 все змінилося. Що нового в Zurb Foundation 6? Шоста версія стала самої переробленої за весь час, і Zurb вдалося спростити процес настільки, що тепер ви можете розробляти більш потужні речі.

У минулій статті я розглянув безліч нових особливостей Foundation 6. У цій же статті я вам розповім про меню. Ви дізнаєтесь, що команда Zurb тепер надає спрощену збірку, а також набір дуже корисних JS плагінів, які роблять систему меню ще краще.

Модернізація меню

У Foundation 6 компоненти навігації зазнали серйозної реконструкції. У Foundation 5 у вас був величезний вибір варіантів меню. Кожне меню мало власну розмітку, налаштування та стилі. В останній версії Zurb переробили всі ці меню в одне велике з безліччю налаштувань. Наведені нижче типи меню відсутні в новій версії:

Inline List – Використовувалося для створення звичайного горизонтального меню.

Side Nav – Використовувалося для створення вертикального меню. Зазвичай використовується в сайдбарах та інших вертикальних областях.

Icon Bar – Використовувалося для відображення пунктів меню з іконками (або просто іконок).

Sub Nav – Використовувалося для створення елементів поднавигации, таких як посилання на частини однієї сторінки.

Все це було замінено на один компонент Menu. Меню само по собі дуже просте. Ви задаєте розмітку з посиланнями a і елементами списку li всередині тега ul. Тегу ul присвоюється клас menu:

  • Option 1
  • Option 2
  • Option 3

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

Просте меню

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

  • Vanilla
  • Strawberry
  • Chocolate
    • Горизонтальне і вертикальне меню

      За замовчуванням меню має горизонтальний вигляд і працює точно так само, як в Foundation 5. Якщо ви хочете зробити вертикальне меню, необхідно просто додати клас vertical. Таке меню можна використовувати, наприклад, для створення списку останніх новин.

      • Dynamic Interactivity, 21st December 2015
      • Web Fundamentals, 12th December 2015
      • Intro to CSS, 02nd December 2015

      Підменю і вкладеність

      Якщо ви хочете зробити меню другого рівня, то ви, швидше за все, скористаєтеся одним з плагінів для меню, таким як dropdown/drilldown компонент. Однак ви так само можете зробити підпункти зі зсувом вліво у вертикальному меню за допомогою класу nested:

      • Course One
        • Course One — One
        • Course One — Two
      • Course Two

      Меню з іконками

      Меню з іконками відмінно працює в дизайнах під додатка і може функціонувати з мінімальним набором стилів.
      До стандартного меню додається іконка в тезі span всередині посилання a. В якості іконки можна використовувати зображення або один з шрифтів Foundation Icon Font.

      Якщо вам більше подобаються шрифти, іконки, то їх необхідно підключити вручну в проект. Замість span необхідно використовувати тег i з потрібним класом.

      • Save
      • Delete
      • Back
      • Forward

      Від нас вимагається лише додати правильний клас до тегу i! За замовчуванням макет має горизонтальне розташування з іконками зліва від пунктів. Якщо потрібно розмістити іконки над пунктами меню, можна додати клас .icon-top. Такий варіант більше схожий на мобільний меню, де маленькі іконки розміщені над текстом.

      Dropdown, Drilldown і Accordion

      Стандартне меню відмінне, але іноді потрібно щось більш потужне, меню, динамічно виводить дочірні елементи меню. У Foundation 6 включені попередні версії Dropdown, Drilldown і Accordion меню. Цими меню можна керувати за допомогою клавіатури, а також можна використовувати семантичну розмітку для полегшення розробки. Так як дані типи меню використовують JS бібліотеку, необхідно створити об’єкт меню:

      Якщо у вашому билде меню вже підключено, можна викликати $(document).foundation() або

      Підключити своє власне меню і створити його. Наприклад, для створення drilldown меню необхідно створити змінну var elem = new Foundation.Drilldown(element) (після підключення необхідних залежностей).

      Dropdown menu має бути вам знайоме. Це стандартний дизайн меню, коли при натисканні на батьківський елемент виїжджають дочірні пункти меню (також при наведенні миші або натискання клавіші на клавіатурі). Щоб надати меню динаміки, необхідно додати атрибут data-dropdown-menu.

      Drilldown menu відрізняється тим, що замість відображення підпунктів зверху або знизу від батьківського пункту меню, виїжджає нове меню поверх старого. Таке меню дозволяє вам в пошуках потрібного пункту «залізти» на Х рівень. Дуже зручне меню, особливо коли у вас мало місця на екрані, як не мобільному телефоні.

      JavaScript генерує кнопку повернення на попередній рівень меню і обробляє її позиціонування. Від вас потрібно додати атрибут data-drilldown до всіх пунктів меню.

      Accordion menu працює за принципом акордеона. По кліку на батьківські пункти розкриваються дочірні. Для включення даного меню необхідно додати атрибут data-accordion-menu до верхнього рівня menu.

      У всіх плагінів є свої функції, події і опції, які можна настроювати під себе. Наприклад, якщо ви хочете додати якої функціонал при закритті підменю у меню акордеон, то необхідно вбудуватися в подію up.zf.accordion menu. Наприклад:

      // робимо що-небудь при закритті акордеона
      $(‘.my-accordion-menu’).on(‘up.zf.accordion menu’, function() {
      alert(‘Menu Closed’);
      });

      У загальному і цілому функції, події та опції даних типів меню були спрощені в Foundation 6. Якщо ви використовували дані типи меню в Foundation 5, то вам повинно бути цікаво, як вони змінилися.

      Адаптивна навігація

      Ця новинка в Foundation 6. Раніше якщо ви хотіли відображати різні стилі меню на різних пристроях, вам доводилося робити кілька меню і показувати/ховати їх. В останній версії фреймворку можна створити одне адаптивне меню, яке буде динамічно змінюватися в залежності від дозволу екрану/пристрої.
      Спочатку задаємо меню як зазвичай:

      • Option 1
      • Option 2
      • Option 3

      Щоб зробити меню адаптивним необхідно додати атрибут data-responsive-menu і дотримати наступні умови:

      Тип меню за замовчуванням (наприклад, drilldown, dropdown або accordion)

      Додаткове меню під інший розмір екрану. Приміром, small-dropdown, medium-drilldown, large-dropdown і т. д.

      Ці дані дозволять нашому меню трансформуватися в залежності від поданих значень. Корисно, якщо ви хочете додати звичайне меню з випадаючим списком на великих екранах пристроїв, а на маленьких екранах повертатися до вертикального меню акордеону або drilldown.

      Якщо ви вручну налаштували класи дозволів екрану, то можна задати ще більше комбінацій (наприклад, показувати меню з випадаючим списком на екстра великих екранах, а на великих і нижче – drilldown меню).

      Компонент топ бар

      Потрібно ще згадати про компоненті Top Bar. Даний компонент, як і всі інші був перероблений. У топ барі є і ліва і права секція. Основне меню можна помістити в ліву частину, а пошук і різні кнопки в праву. Базова розмітка:

      • Monday
      • Tuesday
      • Wednesday
      • Thursday
      • Friday
      • January
      • Лютий
      • March

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

      Якщо ви хочете додати перемикання меню під мобільні пристрої (що в Foundation 5 було частиною компонента), то можна скористатися responsive toggle.

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

      Main Menu

      Тут дуже важливий атрибут data-responsive-toggle, який потрібен для зв’язку з id меню, якими ви хочете керувати (ось чому у нас це top-bar). На екрані відобразиться кнопка, яка перемкне меню тільки в тому випадку, якщо сайт проглядається на маленькому екрані.

      Приклади меню

      Нижче CodePen демо з декількома способами застосування нового компонента меню. Якщо ви хочете налаштувати під себе опції і налаштування за умовчанням, то кращим джерелом буде menu documentation.

      Значне зменшення коду

      Від модернізації компонентів меню в Foundation 6 є два основні плюси. Перший це зниження складності (тепер всі типи меню управляються одним menu з різними опціями). Друга перевага більш тонке, це значне зниження розміру фреймворка.

      Оновлений компонент меню увібрав в себе 5+ різних структур меню, а значить, всі старі CSS стилі, які раніше використовувалися у фреймворку, були видалені. Навіть якщо врахувати, що в блозі Zurb цифри дещо прикрашені, в будь-якому випадку вони видалили більше 1000 рядків стилів, об’єднавши все меню в одне.

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

      Висновок

      Foundation 6 сильно «схуд» у переважній більшості своїх компонентів. Якщо раніше вам потрібно було використовувати кілька різних компонентів для створення меню, то тепер це один дуже гнучкий компонент. Комбінація з різних плагінів меню і глибоко переглянутого білду меню створила один потужний і простий компонент, який ви обов’язково повинні спробувати у всіх своїх проектах на Foundation.