Модуль Superfish у Drupal та його особливості
Друпал дає можливість створювати багаторівнені спадаючі меню та налаштовувати їх при потребі.
Superfish пропонує покращення у веб-доступності Drupal 8. Superfish-меню доступні для скрін-рідерів. Вони можуть керуватися з клавіатури та є сумісними з тачскрінпристроями.
Ці меню автоматично адаптують свою ширину до маленьких екранів. Можливо також створювати багатостовпчикові меню. Модуль Superfish підтримує напрям тексту RTL (справа наліво). Ефекти “easing” (пом’якшення), створені плагіном jQuery Easing, роблять анімацію плавнішою та більш реалістичною.
Створення меню з модулем 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.