Expanding Grid Menu

A CSS Grid powered menu with a box look inspired by the effect seen in the "Ableton Live 10: What's New" video.
GridMenu_featured

Today we’d like to share a little menu animation with you. The idea is inspired by an effect that can be seen in this video, right at the beginning: a couple of differently sized boxes slide out and fill the screen. We thought this might be a nice idea applied to a menu using CSS Grid.

The demo is kindly sponsored by monday.com: Knowledge Sharing System perfect for your team. If you would like to sponsor one of our demos, find out more here.

We use anime.js for the animations and imagesLoaded for preloading the images.

Attention: Modern CSS properties at work, please view in an updated browser!

We’ve created two different styles; have a look at the screenshots and check out the demos.

To open the menu, click on the + info in the bottom left corner.

GridMenu_01

GridMenu_02

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

References and Credits

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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.

Feedback 17

Comments are closed.
  1. 11

    Hi Mary Lou, I can’t open the menu using the keyboard. I can tab through the rest of the links but the menu is not accessible 🙁

  2. 13

    why your site stylesheet won’t load for me ?
    (pure Html !!!)

    but your demos works fine (._.)

Comments are closed.