Multibox Menu

A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions.
MultiboxMenu

From our sponsor: Design every part of your website with the Divi Theme Builder.

Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.

The demo is kindly sponsored by Milanote: your new creative hub. If you would like to sponsor one of our demos, find out more here.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

For the main page we have a simple layout with a little motion effect on the background image.

MultiboxMenu01

When clicking on the menu icon in the top right corner, the menu opens.

MultiboxMenu02

The menu boxes reveal following an order that we define on each element.

MultiboxMenu

We hope you like this little menu and find it useful!

References and Credits

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.