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.

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 17

Comments are closed.
  1. 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. why your site stylesheet won’t load for me ?
    (pure Html !!!)

    but your demos works fine (._.)