Анимация открытия и закрытия меню на webflow, кастомный бургер и превращение в его в крестик

#webflow #вебфлоу
На мобильных устройствах меню прячется в бургер (кнопка три полоски) при нажатии (тапе) на которую открывается список пунктов меню, при этом сама кнопка меню после его открытия должна превратиться с кнопки открытия в кнопку закрытия меню, сменив три линии на крестик.

Именно такую анимацию, которая сделает ваш интерфейс логичнее и красивее мы сегодня будет делать. Стандартными средствами вебфлоу.

•••••••••••••••••••••••••••••••
— Полезные штуки для webflow https://freelance-blog.com/webflow/
— Индивидуальное обучение https://freelance-blog.com/study/
— Блог про фриланс и вебфлоу https://freelance-blog.webflow.io
•••••••••••••••••••••••••••••••

❓❓❓ Что такое этот вебфлоу? Почему это НЕ конструктор? Как на нем зарабатывать больше денег, чем остальные?    • Что такое webflow и как правильно про...  

БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый расширенный (для новичка)    • Курс для новичка по webflow  
👉 • Базовый ускоренный, для новичка который спешит    • Трелло для фрилансера, ускоряем свою ...  
👉 • Портфолио для фрилансера (уровень средний)    • Курс по созданию портфолио в webflow  
👉 • Портфолио для студии (уровень сложный)    • Бесплатный курс по разработке сайта с...  
👉 • Делаем сложный сайт (уровень профи)    • Сайт фотографа, бесплатный курс по ве...  

•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас — тогда я способен вам помочь! https://freelance-blog.com/study/
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••

Моя почта — [email protected]
Телеграм https://t.me/artstranger

•••••••••••••••••••••••••••••••
👉 • Портфолио — https://freelance-blog.com/
👉 • Инстаграм —   / freelance_proka4ka  
👉 • Бесплатные плюшки — https://freelance-blog.com/webflow/
👉 • Материалы для уроков — https://freelance-blog.webflow.io/
👉 • Индивидуальное обучение — https://freelance-blog.com/study/
•••••••••••••••••••••••••••••••

Таймкоды:
00:00 Демонстрация открытия и закрытия меню с превращением бургера с крестик
00:35 Добавляем навбар
00:55 Меняем стандартный контейнер на правильный
02:12 Наполняем демо контентом
03:46 Приступаем к анимированию кнопки меню
04:29 Добавляем кастомные линии создавая свою иконку меню
08:48 Создаем анимацию открытия меню с изменением иконки на крестик и обратный процесс
20:11 Подправляем дизайн
21:21 Итоги