Версія Esl 1.8 представила абсолютно новий, повністю адаптивний, доступний і високо налаштовуваний набір елементів для створення навігаційних меню/навігацій сайтів в Esl.
Новий механізм меню складається з 5 нових елементів (перелічених нижче), які ви можете комбінувати, налаштовувати на свій смак, щоб створити всі види настільних і мобільних меню.
Існують певні найкращі практики, з якими слід ознайомитися, щоб забезпечити належну доступність та стилізацію. Тому, будь ласка, знайдіть час, щоб ознайомитися з інформацією нижче, щоб отримати чітке розуміння цього нового, потужного інструменту.
Нав (вкладений)
Цей новий вкладений елемент містить як ваше настільне, так і мобільне меню.
Як і в будь-якому іншому вкладеному елементі, ви тепер можете додавати будь-який елемент до своїх меню в Esl і більше не обмежені старим «плоским» навігаційним меню.
Існує вбудована налаштування для вибору точки переривання, на якій ви хочете показати своє мобільне меню. Мобільне меню використовує той же розмітку та елементи, що і настільне меню. Воно просто оптимізоване та стилізоване для мобільних пристроїв і маленьких екранів.
Ви також можете проектувати мобільні меню з абсолютно іншим контентом/елементами, використовуючи нові елементи Offcanvas і Toggle. Обидва з яких ми розглянемо пізніше.
Текстове посилання
Простий, але дуже зручний новий елемент для створення простих текстових посилань навігаційного меню (плюс іконка, якщо потрібно). Це набагато краще, ніж перетворювати базовий текстовий елемент на посилання. Ви можете, звичайно, використовувати текстове посилання в будь-якому іншому місці на вашому сайті.
Випадне меню (вкладене)
Використовуйте новий елемент Випадне меню для створення повністю доступних підменю. Ви можете вкладати скільки завгодно рівнів, додаючи випадні меню в випадні меню. Ви також можете вибрати, коли активувати випадне меню (при наведенні, кліку або обох).
Маленька стрілка випадного меню поруч з текстом/посиланням випадного меню дозволяє вам завжди перемикати випадне меню за допомогою клавіатури (при натисканні ПРОБУ або ВВОДУ) для доступності.
Випадне меню можна перетворити на повноправне вкладене мегаменю одним клацанням. Воно охоплює всю ширину вікна перегляду або адаптується до ширини та вертикальної позиції будь-якого іншого елемента на вашій сторінці.
Ви навіть можете створити багаторівневі мобільні меню, де лише активне випадне меню з’являється в полі зору.
Ми також отримали параметри для легкого дизайну нестандартних стрілок випадного меню.
Тоггал
Головною метою цього нового, повністю доступного значка/кнопки “гамбургер” є показ/сховання вашого мобільного меню та/або елементів Offcanvas.
Ви можете вибрати з різних анімаційних ефектів і навіть налаштувати свій власний значок перемикача.
Генератор Toggle зазвичай виявляє контекст Offcanvas або Nav (вкладений), в якому він розміщений.
Однак ви можете використовувати його для набагато більше. Оскільки він надає налаштування для перемикання будь-якої HTML-атрибутики будь-якого елемента на вашій сторінці.
Подібні тригери можна досягти через Взаємодії. Але Toggle має вбудовану доступність і логіку меню, що робить весь процес переключення набагато швидшим, простішим і кращим.
Offcanvas (вкладений)
Будучи вкладеним, новий елемент Offcanvas дозволяє вам створювати унікальні мобільні меню з абсолютно різним контентом від вашого настільного меню. Ви можете заповнити Offcanvas будь-якими елементами, які вам подобаються, і ви не обмежені лише меню.
Offcanvas можна відкрити та закрити за допомогою нового елемента “Toggle”. Це надзвичайно просто, як ви можете побачити в розділі Налаштування Offcanvas нижче.
Offcanvas має два ефекти: слайд-входження (за замовчуванням) та зміщення.
Структура меню за замовчуванням
Коли ви додаєте елемент Nav (вкладений) до полотна, він заповнюється 2 посиланнями Nav, 1 випадаючим меню та 2 елементами Toggle (для показу та приховування мобільного меню).
Будучи вкладеним елементом, ви можете додавати будь-який елемент Esl всередину вашого меню.
Блок “Nav items” є спеціальним елементом, який не можна видалити окремо, оскільки він містить всі елементи верхнього рівня меню та служить обгорткою для мобільного меню. Те ж саме стосується Div “Content” всередині елемента Dropdown, який містить усі вмістові елементи випадаючого меню.
Усі елементи верхнього рівня меню зазвичай обгорнуті в HTML-тег li для доступності. “Nav items” використовує тег ul. Те ж саме стосується “Структури випадаючого меню”.
Структура мобільного меню за замовчуванням
За замовчуванням, мобільне меню стає видимим на перетині “Мобільний ландшафт”. Це означає, що замість відображення елементів верхнього рівня меню, стає видимим (гамбургер) Toggle, який відкриває мобільне меню, коли ви на нього натискаєте. Ви, звичайно, можете вибрати будь-який інший перетин, щоб почати відображати своє мобільне меню під час редагування вашого вкладеного елемента Nav.
ВАЖЛИВО: Переконайтеся, що ви редагуєте налаштування елементів “Мобільне меню” та “Nav items” на перетині, на якому починає відображатися мобільне меню (за замовчуванням: Мобільний ландшафт).
Елемент перемикача з маркуванням “Перемикач (Відкрити: Мобільний)” відкриває мобільне меню (виділене на скріншоті вище).
Ви можете вибрати з різних анімацій, які виконуються на перемикачі при натисканні.
Елемент “Перемикач (Закрити: Мобільний)” знаходиться всередині “Навігаційних елементів” (обгортка мобільного меню).
Мега-меню
Створити мега-меню з Esl не може бути простіше. Просто “Увімкніть” налаштування мега-меню при редагуванні елемента “Випадаючий список” на ваш вибір.
За замовчуванням вміст випадаючого списку охоплює всю доступну (екранну) ширину, як це:
Ви також можете визначити “CSS селектор”, ширина та горизонтальне положення якого підлаштує мега-меню. Наступний скріншот використовує id верхнього контейнера:
Вміст випадаючого списку – це просто елемент Div. Це дозволяє вам створювати будь-яке макет мега-меню:
Мега-меню WordPress
Ви також можете додати мега-меню до вашого меню WordPress, активувавши налаштування “Мега-меню” вашого елемента “Навігаційне меню” ось так:
Наступним кроком створіть своє мега-меню, використовуючи новий шаблон (тип шаблону: секція).
Потім перейдіть до “Вигляд > Меню” та розширте верхній рівень меню, під яким ви хочете відобразити це мега-меню, і виберіть свій шаблон мега-меню з опцій “Мега-меню”:
Ваш шаблон мега-меню тепер з’являється, коли ви наводите курсор на цей елемент меню на фронтенді.
Багаторівневе випадаюче меню
Створити багаторівневі випадаючі меню так само просто. Просто активуйте налаштування “Багаторівневе” для окремого випадаючого списку або безпосередньо для елемента “Навігація з можливістю вкладок”, щоб воно було застосовано до всіх ваших випадаючих списків.
“Багаторівневе” означає, що видимий лише активний вміст випадаючого списку. Це особливо корисно для випадаючих меню з великою кількістю елементів або для списків з кількома вкладеними випадаючими вікнами, оскільки вони, швидше за все, виходять за межі вікна перегляду. Особливо на мобільних пристроях.
Також можна встановити “посилання назад”, яке відображається як перший елемент кожного рівня випадаючого списку.
Оскільки видимий лише активний випадаючий список, генератор багаторівневого випадаючого списку зазвичай вмикається при натисканні, а не при наведенні.
Вам також потрібно лише активувати “Багаторівневе” на кореневому рівні вашого випадаючого списку. Всі підвипадаючі списки мають можливість багаторівневого меню з коробки.
Багаторівневі меню WordPress
Esl 1.8 дозволяє вам перетворити підменю WordPress на багаторівневі меню. Просто увімкніть налаштування “Багаторівневе” у вашому елементі “Навігаційне меню”, а потім активуйте налаштування “Багаторівневе” для елементів меню WordPress у розділі “Вигляд > Меню” ось так:
Статичні (позиційні) випадаючі меню
За замовчуванням вміст випадаючого меню позиціонується absolute. Витягує його з потоку документа, що є очікуваним/бажаним у настільному меню.
Але, коли, наприклад, випадаюче меню розташоване всередині Offcanvas, ви, найпевніше, не хочете такої поведінки.
Натомість ви хочете показати вміст випадаючого меню при натисканні та позиціонувати його безпосередньо під перемикачем випадаючого меню & у звичайному потоці документа.
Щоб цього досягти, просто увімкніть налаштування “Позиція: Статична” під час редагування випадаючого меню на ваш вибір.
Випадаючі меню WordPress
Щоб використати меню WordPress у вашій налаштовуваній навігаційній групі, додайте елемент “Навігаційне меню” всередину елемента Випадаюче меню > Вміст. Потім відредагуйте його та виберіть меню WordPress, яке ви хочете відобразити всередині вашого випадаючого меню.
Це означає, що кожне меню WordPress, яке ви створюєте для вашої навігаційної групи, повинно містити елементи меню, які ви хочете відобразити всередині конкретного випадаючого меню.
Ми обрали цей підхід, оскільки він дозволяє повною мірою використовувати можливості налаштування навігаційної групи, при цьому маючи можливість контролювати своє меню через WordPress.
Ви можете стилізувати це меню WordPress, редагуючи “Випадаюче меню”, в якому воно розміщене, або, якщо ви хочете стилізувати його як усе меню, ви можете налаштувати параметри “Випадаючого меню” вашої “Навігаційної групи”.
Унікальні мобільні меню (Offcanvas + Перемикач)
Використовуйте новий елемент Offcanvas, щоб створювати унікальні мобільні меню. Або будь-який інший вміст, який ви хочете відобразити за допомогою елемента перемикача.
Давайте почнемо з того, що додамо елемент Offcanvas на нашу сторінку.
Переконайтеся, що ви позиціонуєте елемент Offcanvas поза “Навігаційною групою (вкладена)”. Інакше логіка перемикача обох цих елементів може взаємодіяти. Ми позиціонуємо його ПІСЛЯ нашої “Навігаційної групи”.
Оскільки ми не використовуємо стандартний вигляд мобільного меню навігаційної групи, ми можемо видалити елемент “Перемикач (Закрити: Мобільний)”.
Ми будемо використовувати елемент “Перемикач (Відкрити: Мобільний)”, щоб відкрити наш елемент Offcanvas. Просто скопіюйте ID елемента Offcanvas з панелі, відредагуйте елемент “Перемикач (Відкрити: Мобільний)” та вставте його під налаштуванням “CSS селектор”.
Збережіть свої зміни і перейдіть на передній кінець. Клік на іконку Перемикача повинен відкрити ваш Offcanvas.
Оскільки Offcanvas є вкладеним елементом, ви можете додавати будь-які макети та елементи всередину нього.
Offcanvas постачається з попередньо заповненим перемикачем закриття. Клікнувши за межами Offcanvas (на задньому плані), ви також закриваєте Offcanvas.
Коли ви редагуєте Offcanvas в движку, переконайтеся, що увімкнено налаштування “Залишити відкритим під час стилізації”, щоб Offcanvas не зникав, коли ви редагуєте різні елементи.
Мобільні меню не на весь екран
Щоб показати стандартне мобільне меню без покриття всього екрану, відредагуйте свій Нав (вкладений) і встановіть “Висоту” в розділі “Мобільне меню” на fit-content.
Таким чином, висота вашого мобільного меню загалом зростає або зменшується відповідно до його вмісту.
Потім встановіть “Позицію” вашого “Мобільного меню” на свій розсуд (див. скріншот вище), щоб воно не покривало Перемикач.
Оскільки елемент “Елементи Нав” служить обгорткою мобільного меню, ви можете відредагувати його, щоб налаштувати відступи, фон тощо. Переконайтеся, що ви вносите ці зміни стилю на точці зламу, на якій ваше мобільне меню починає з’являтися, щоб ці стилі застосовувалися тільки до мобільного меню, а не до десктопного.
Тепер, коли мобільне меню більше не покриває весь екран, ви, probablement, можете видалити елемент “Перемикач (Закрити: Мобільний)”, який Esl додає за замовчуванням.
Додаткова порада: щоб запобігти покриттю вашого Перемикача мобільним меню, що може статися на певних розмірах екранів і позиціюванні, відредагуйте елемент Перемикача і встановіть його z-index у розділі “Стиль > Макет > Z-index” на значення 1001 або більше.