Как создать гамбургер-меню в Readymag
В этой статье мы шаг за шагом объясним, как добавить в проект гамбургер-меню. Попутно мы расскажем о новых полезных функциях: настройке стиля ссылки на текущую страницу, глобальных виджетах в шаблонах и переключателе Hide in editor.
От десктопной версии к мобильной
Чаще всего бургерное меню нужно для мобильной версии проекта. Вот что нужно сделать, чтобы собрать меню на основе уже готовой десктопной версии:
- —Переключитесь на мобильный вьюпорт.
—Скопируйте десктопное меню. Затем кликните на значок глаза в меню виджетов, чтобы скрыть оригинал меню. Другой вариант — убрать десктопное меню из видимой области мобильного проекта. Так вы защитите десктопную версию от ненужных изменений в вёрстке.
— При необходимости отредактируйте новые виджеты: после копирования можно не только настраивать текстовые стили, но и изменять текст отдельных пунктов в мобильной версии, не затрагивая исходное меню.
— Создайте иконку меню с помощью виджета Shape. Закрепите (Fix) ее в подходящем углу и включите в настройках ‘On All Pages’. Если хотите, чтобы иконка оставалась видимой при скролле вниз, нажмите также ‘Above Pages’.
— Создайте прямоугольник с помощью виджета Shape — он будет фоном меню. Перетащите пункты меню поверх прямоугольника.
— Сгруппируйте пункты меню с фоном. Добавьте всей группе анимацию ‘Opacity’ или ‘Move’, сделайте иконку меню триггером для этой анимации. Также можно добавить в качестве триггера сами пункты меню, чтобы после клика пользователя меню исчезало.
— Закрепите группу виджетов в одном из углов—это зафиксирует меню при скролле. Включите ‘On All Pages’ и ‘Above Pages’.
— Перейдите в режим превью и проверьте, что все в порядке.
Десктопное меню
Чтобы с нуля создать гамбургер-меню на десктопе, вам понадобятся все те же шаги — только вместо копирования исходного меню нужно будет создать пункты меню. Настройте ссылки на страницы проекта, используя тип ссылки Jump to Page, затем укажите номер нужной страницы. Если вы хотите, чтобы пользователи могли перемещаться по страницам проекта только с помощью меню, измените навигацию проекта на горизонтальную и скройте стрелки.
Move и Opacity
Есть два основных способа анимации гамбургер-меню в Readymag — Opacity и Move.
Если вы используете анимацию Move, нужно поместить фон и элементы меню вне видимой части проекта. Затем задайте параметры движения в пикселях и задержку анимации. Выберите также тип анимации — например, ‘Ease Out’. Сделайте иконку меню триггером анимации. Проверьте, что все правильно, с помощью превью.
Если вы предпочитаете анимацию Opacity, сразу поместите меню на нужное место, добавьте анимацию, задайте задержку и триггер.
Скрыть в редакторе
При использовании Opacity вам может пригодиться настройка ‘Hide in editor’. Она временно скрывает анимированные виджеты — это позволит работать над частями проекта, расположенными под меню. Виджет останется виден из списка виджетов в левом нижнем углу и будет отображаться в редакторе после клика на триггер анимации.
Эта настройка работает только для анимаций Opacity, начинающихся с 0.
Выберите подходящий стиль
Вы можете настроить вид ссылок в меню. В Readymag есть три вида настройки ссылок: Link, Hover и Current. Current особенно полезен для гамбургер-меню: он позволяет изменить вид ссылки, ведущей на текущую страницу (например, задать ей особый цвет).
Сохраните меню для будущих проектов
Не обязательно каждый раз собирать меню с нуля — вы можете сохранить его на будущее. Для этого создайте шаблон на основе проекта, и при сохранении в My Templates выберите ‘Include on All pages’. Так меню будет работать во всех проектах, созданных с использованием этого шаблона.
Подпишитесь на нашу рассылку на русском языке, чтобы не пропустить новые туториалы.
Зарегистрируйтесь в Readymag, чтобы создавать собственные проекты с гамбургер-меню.
Прочитать оригинал этого материала на английском можно здесь.