How To Create A Hamburger Menu For Your Website

Introducing The New Overlay & Animation Features

Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and exports them as HTML & CSS with a single click or publish them to a custom domain in just minutes.

Responsive design with Auto-Layout | Publish websites | Animate with Timeline

💪 Let’s start by showing:

Before:

Sketch file with 2 artboards. The one on the right is the “Overlay” artboard. — Download

After:

Mobile Website

📱 Mobile screens have limited screen space. That’s why sometimes our designs include menus that only present themselves when users explicitly tapped a button. A common use-case for that is hiding the navigation menu of a website in a “Hamburger menu”. The popular frontend framework Bootstrap made it a convention and from there we can see it all over (granted not everyone likes it.. 😉)

☝️ Overlay

Today we are announcing a groundbreaking feature called: “Overlay”.

The Overlay feature can be used not just in mobile navigation menu, but it many other cases in Desktop or Mobile. For example:

• Menus
• Popups
• Floating Videos
• Modal Dialogs

💡 Did you know? When you use an overlay the page doesn’t reload and instead gives an instant feedback, giving a slick and snappy user experience.

🤓 How To Create An Overlay

⏱ It only takes a few seconds to mark an artboard as Overlay and select an animation for the transition. Here are the steps:

1. Create an Artboard that will act as the Overlay. In this case it’s the dark menu on the right.
2. On the presenting Artboard select the button that triggers showing the Overlay. In this case it’s the Hamburger menu on the top left corner.
3. Click the ••• button in the Launchpad panel on the bottom right corner.
4. Click “Show Overlay”
5. Select the animation you would like for presenting the Overlay artboard.
6. You’re done!

✨ Animations

If you’d like to make your website look awesome, you can now add some animations that occur when the page loads.

Sparkle some magic with animations

🎩 How to Create Animations

Select your animation from the catalogue & play with the params

1. Select the layer / group you’d like to animate
2. Click the ••• button in the Launchpad panel on the bottom right corner.
3. Click “Animation”
4. Select the animation you would like for this layer to enter with.
5. Fine tuning:
   Play with duration, delay & even the CSS to make it exactly as you want it.
6. You’re done!

👓 Conclusion

The Overlay feature was one that was missing to enable us to create complete responsive websites that fit both Desktop and Mobile screens. With the feature now live and released, designers can publish fully functional websites without having to code or to be dependent on developers. This is a giant step towards complete freedom of creativity.

We hope you enjoy creating awesome websites with Launchpad, Overlays and Animations. If you want to share what you’ve created join us at https://www.facebook.com/groups/animaapp/

Responsive design with Auto-Layout | Publish websites | Animate with Timeline