Из десктопной версии в мобильную
Если вы уже создали меню в десктопе и хотите превратить его в бургер-меню для мобильной версии, следуйте шагам, описанным ниже:
- Перейдите в режим редактирования мобильной версии, активировав мобильный лейаут в Панели виджетов.
- Скопируйте все виджеты из десктопного меню. Затем нажмите на иконку глаза в панели виджетов, чтобы скрыть оригиналы, используемые в десктопной версии, или же поместите их за пределами рабочей области. Это поможет избежать изменений в десктопной версии проекта при работе с мобильной.
- Отредактируйте скопированные виджеты. После копирования меню вы можете редактировать независимо от десктопной версии не только стиль текстового виджета, но и сам текст.
- Выберите иконку для меню в библиотеке виджета Shape. Включите настройку On all pages и зафиксируйте иконку в желаемом углу страницы. Вы также можете активировать опцию 'Above pages, если хотите, чтобы иконка оставалась в исходном положении при скролле страницы.
Hа плане Free доступен лишь ограниченный список иконок. Функция поиска также недоступна.
- Создайте прямоугольник, который будет служить фоном для вашего меню.
- Добавьте анимации с эффектами 'Opacity' или 'Move' к фону и виджетам меню, затем назначьте триггером вашу иконку бургер-меню.
Чтобы анимация срабатывала заново каждый' раз, когда пользователь переходит на новую страницу, активируйте настройку Reset animation.
- Зафиксируйте элементы и фон меню относительно желаемого угла страницы, а также активируйте для каждого опции On all pages и Above pages.
- Проверьте финальный результат в режиме превью.
Десктопная версия
Создать бургер-меню для десктопной версии проекта можно, следуя тем же шагам, которые описаны выше. Единственное различие заключается в том, что виджеты в этом случае нужно создавать с нуля.
Чтобы страницы проекта были доступны только через ссылки в меню, измените навигацию на горизонтальную и отключите навигационные стрелки в настройках проекта.
Выбор типа анимации
Для анимации бургер-меню в Readymag можно использовать два эффекта — Move и Opacity.
Используя анимацию с эффектом 'Move', поместите фон и элементы меню за пределы рабочей области мобильной версии проекта. Затем настройте параметры движения анимации в пикселях и задержку для каждого элемента отдельно. Также задайте тип анимации, к примеру, Ease out. Назначьте иконку триггером для анимации и проверьте, как работает меню в режиме превью.
Если вы предпочитаете эффект Opacity, то поместите меню там, где оно должно появиться и добавьте анимацию, настройте задержку и назначьте триггер для каждого элемента.
Также вы можете активировать опцию Hide in editor. Он скрывает все виджеты с триггерной анимацией из режима редактирования, упрощая процесс редактирования виджетов, расположенных в слоях под меню. Эти виджеты останутся в панели виджетов и появятся в рабочей области, если вы кликните на триггер анимации.
Эта опция доступна только для анимаций с эффектом Opacity, начинающимся с нуля.
Для того чтобы настраивать ссылки в меню было удобнее, используйте стили ссылок, Они бывают трёх видов: Link, Hover, and Current. Ссылки вида Current особенно полезны при создании бургер-меню, позволяя показывать пользователям, на какой странице вашего проекта они находятся, — к примеру, при помощи цветового выделения ссылок.
Завершив создание вашего бургер-меню, вы можете использовать его в ваших будущих проектах, сохранив как шаблон. Если при сохранении страницы в альбом My Templates вы укажете настройку ‘Include on All pages, меню будет автоматически работать во всех проектах, созданных из этого шаблона.