Как пользоваться: Иконки бургер-меню
- Наведите курсор на иконку, чтобы увидеть её открытое состояние, или отметьте Показать открытое состояние, чтобы увидеть все сразу. Нажмите на понравившуюся.
- Задайте ширину, толщину, отступ, цвет и скорость. Каждая иконка обновляется в реальном времени.
- Скопируйте CSS, HTML и JS или используйте Копировать всё, чтобы получить один блок.
- Для Webflow нажмите Копировать для Webflow и вставьте код в Designer сочетанием Ctrl/⌘+V.
Кнопка меню, которой могут пользоваться все
Каждая иконка — настоящая <button>, а не кликабельный div, поэтому она сразу работает с клавиатуры и программ чтения с экрана.
- aria-expanded сообщает вспомогательным технологиям, открыто ли меню, а CSS использует тот же атрибут для анимации. Один источник правды.
- aria-label задаёт название кнопки, так как у неё нет видимого текста.
- Область нажатия: отступы делают кликабельную зону не менее 44 пикселей в квадрате.
- Уменьшенное движение отключает анимацию для посетителей, которые просят меньше движения.
Подключение к вашему меню
Небольшой скрипт переключает aria-expanded при клике. Чтобы показать ваше меню, добавьте aria-controls="menu" и правило вида .burger[aria-expanded="true"] ~ #menu { display: block; } или переключайте класс меню в том же обработчике клика.
В Webflow Копировать для Webflow вставляет Embed с иконкой, стилями и скриптом. Чтобы открывать навбар Webflow с её помощью, поместите Embed внутрь элемента Menu Button навбара. Также полезно: Стили CSS-кнопок, Генератор CSS-анимации при наведении, Генератор CSS-лоадеров.
Также ищут как: анимированное бургер меню css, css гамбургер меню, бургер в крестик css, гамбургер меню webflow, гамбургер меню css.
Инструменты, которые хорошо сочетаются с Иконки бургер-меню
- Генератор CSS-кнопок — Создайте кнопку, которая хорошо выглядит в каждом состоянии.
- Генератор CSS @keyframes — Визуальный редактор для @keyframes.
- Генератор выпадающих списков — Не нужно вручную набирать списки вариантов.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.