Додайте «смаку» в Drupal 8 меню завдяки модулю Superfish

20.10.2017
Додайте «смаку» в Drupal 8 меню завдяки модулю Superfish
Автор:

Давайте поговоримо про секретні інгредієнти в меню. Як правильно підібрані спеції, вони створюють особливі смаки, перед якими ваші гості не зможуть встояти. Коли йдеться про меню на Drupal-сайтах, рецепт простий: додайте трохи jQuery! Використовуючи Drupal-модуль Superfish, який інтегрує плагін для меню jQuery Superfish, можна створювати інтерактивні багаторівневі меню з винятковим рівнем юзабіліті. З’ясуймо, як це працює на прикладі Drupal 8.

Drupal-модуль Superfish та його особливі меню

Ядро Друпала дає можливість створювати багаторівнені спадні меню та налаштовувати їх на свій смак. Але модуль Superfish пішов ще далі та вивів меню на новий рівень інтерактивності.

Superfish пропонує чудові покращення в плані веб-доступності, так важливі для філософії Drupal 8. Superfish-меню доступні для скрін-рідерів. Вони можуть керуватися з клавіатури та є сумісними з тачскрін-пристроями.

Ці меню здатні автоматично адаптувати свою ширину до маленьких екранів. Можливо також створювати багатостовпчикові саб-меню, відомі як мегаменю. Модуль Superfish підтримує напрям тексту RTL (справа наліво).

Ефекти “easing” (пом’якшення), створені плагіном jQuery Easing, роблять анімацію плавнішою та більш реалістичною.

І це далеко не весь список переваг модуля. Давайте перейдемо до практики і створимо меню за допомогою Superfish.

Створення Drupal 8 меню з модулем Superfish

Необхідні бібліотеки

Для початку потрібно встановити необхідні залежності для роботи модуля.

  • Завантажте бібліотеку JavaScript під назвою Superfish library 2.x та розмістіть її в директорію libraries кореневої папки свого Drupal-сайту. Перейменуйте папку у “Superfish”.
  • Необов’язково, але рекомендовано також встановити плагін jQuery Easing і розархівувати його знову ж таки в директорію libraries. Папка повинна називатися “Easing”.

Модуль Superfish

Коли залежності встановлено, можна переходити до завантаження і увімкнення власне модуля Superfish на вашому Drupal 8 сайті.

Ваше меню

Для роботи з модулем потрібне буде меню. Створити його можна, перейшовши в пункт «Структура» — «Меню» і клікнувши «Додати меню». Створіть структуру меню, а потім наповніть його лінками, що ведуть на відповідний контент. Позначте галочкою «Показувати в розширеному вигляді», якщо в пунктів меню є дочірні пункти. Натискайте «зберегти» після кожної зміни.

Коли меню буде готове, клікніть «Структура» — «Розташування блоків», оберіть місце для меню на Drupal-сайті, знайдіть своє меню в списку з позначкою “Superfish” і натисніть «Розташувати блок».

Налаштування Superfish

Вікно «Налаштувати блок» має безліч опцій на ваш вибір. Ось деякі з найцікавіших.

  • Вибір для типу меню — горизонтальне, вертикальне або “NavBar”.
  • Чорний, синій, кава, білий або жоден — варіанти стилю меню.
  • Можна додати стрілки до пунктів меню або ефект тіні.
  • Визначте швидкість анімації — маленька, середня чи велика.
  • Час затримки миші означає, як довго меню лишається відкритим, коли мишка знаходиться поза ним.
  • Налаштуйте ефекти “slide-in” плагіна jQuery Easing.

Є також безліч інших опцій, пов’язаних із тачскрінами, багаторівневими сабменю, додатковими класами CSS і так далі.

Наостанок

Завжди є спосіб втілити абсолютно будь-які ваші ідею щодо меню. Наші розробники допоможуть вам налаштувати Superfish чи інші модулі Drupal 8 або створять кастомні модулі спеціально для вас. У ваших гостей просто немає шансів лишитися байдужими до вашого сайту — вони будуть насолоджуватись навігацією завдяки привабливим інтерактивним меню!

Голосів: 1 Рейтинг: 5

Також по темі

1

Кожні півроку виходить свіжа підверсія Drupal 8 з безліччю привабливих новинок. Отож, ще один великий день настав! Ця осінь особливо багата на подарунки, тож 4 жовтня відбувся реліз Drupal 8.4.0....

2

Ми хочемо вам у дечому зізнатися. Чесно кажучи, ми стаємо трішки шопоголіками ;) Після...

4

Можливості Drupal 8 можна порівняти з безкрайніми колосистими полями — запрошуємо вас на ще одну прогулянку ними! Окрім усього іншого, Drupal 8 дозволяє створювати кастомні форматери полів, тож...

5

Вітання усім! Таке враження, що «8» — щасливе число, а 8/2017 — щасливий місяць для всіх друпалістів. Очевидно, черпаючи додаткову енергію з серпневого сонця, Drupal-спільнота створила безліч...

Subscribe to our blog updates