Desktop to Mobile
The most frequent use case for the burger menu is mobile.
If you have already created a desktop navigation bar and want to transform it into a mobile burger menu, please follow the steps below:
- Switch to the mobile viewport by clicking the mobile icon at the Widget bar.
- Copy all items from your navigation bar. Then use the eye-icon in the widget bar to hide the original menu items in the mobile viewport or move them outside the mobile layout frame. That will prevent disruptions to the desktop version while working on mobile.
- Edit the copied widgets as you like: after copying the menu, you can safely change not only the styling of the text widget but also the text itself.
- Pick a menu icon for the mobile menu using the Shape widget. Set it to appear ‘On All Pages’ and fix it to the corner you prefer. Enable ‘Above Pages’ if you’d like the icon to stay visible on-scroll.
On Free, only the default icons are available. The search option is also disabled on this plan.
- Create a rectangular background for the menu.
- Add ‘Opacity’ or ‘Move’ animations to the menu items and the background, make your menu icon a trigger for each of these animations.
Enable the Reset animation option: that way, the animation will start again each time your user returns to the animated widget.
- Fix the menu items and the background to the corner to pin it for on-scroll. Enable ‘On All Pages’ and ‘Above Pages’ for each.
- Check the preview.
Desktop
To create a hamburger menu for Desktop browsing, the steps you’ll follow are similar—but you will need to create new widgets from scratch. Then set up links to project pages using number notation.
To restrict users to visiting project pages only using the menu, change project navigation to horizontal and hide navigation arrows in your project settings.
Choosing the animation type
There are two main ways to animate a hamburger menu in Readymag: Opacity and Move animations.
When using a Move animation, place the background and the menu items beyond the visible part of the project. Then set movement parameters in pixels and the animation delay for each of the menu elements. Also, select an animation type—for example, ‘Ease Out’. Then set the menu icon as a trigger for all animations—check the preview to finalize details.
If you prefer to use Opacity animations, place the menu where it should appear, then add the opacity animations, set a delay, and trigger for each.
Consider the ‘Hide in editor’ toggle. It hides widgets with on-trigger animations from view in the Editor mode, allowing you to hone the parts of your project located behind the menu. These widgets will still be visible in the widget bar. They will also appear in the Editor if you click on the animation trigger.
The toggle appears only for Opacity animations, starting from zero Opacity.
It’s also important to customize links for the menu. Link styles in Readymag offer three options: Link, Hover, and Current. Current is especially useful with a hamburger menu, allowing you to show users which page they’re currently on—for example, by using a different link color.
Once your menu is ready, consider reusing it for other projects by setting up a template. If you select ‘Include on All pages’ while adding a template to ‘My Templates’, the menu will work in all projects created with it.