How to create a hamburger menu in Readymag

Desktop to Mobile

Designers mostly use burger menus for mobile layouts. Now there are two options to create such burger menus: via the updated Hotspot or from a desktop navigation bar.

To design a hamburger menu using Hotspot you’ll need to:

— Create a Hotspot and choose a burger menu icon for the Pin—a sort of button users will tap on to open the menu.

— Make up several blocks of text for the Tip, your actual menu with sections.

— Then add links to the Tip blocks and draw up a visual part.

To create a mobile menu from a desktop navigation bar:

—Switch to the mobile viewport.

—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. (You can also move them away from the visible part of the mobile project.)

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 to the corner you prefer. Enable ‘Above Pages’ if you’d like the icon to stay visible on-scroll.

—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.

Add menu items as triggers for the animations as well. This way, the menu will be hidden after the user has made their selection.

—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.

Move vs Opacity

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 — say, ‘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.

The choice between Opacity and Move is up to you.

Hiding in Editor

If you’re using Opacity, consider the ‘Hide in editor’ toggle. It hides widgets with on-trigger animations from view, allowing you to hone the parts of your project located behind the menu. The widget will still be visible in the widget bar. It will also appear in the Editor if you click on the animation trigger.

The toggle appears only for Opacity animations, starting from zero Opacity.

Choose the right link style

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 — say, using a different link color.

A template with global widgets

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.