Slide Out Box Menu

A details menu with boxes that slide out in an irregular grid. The grid items get revealed individually with delays from the top right corner of the page.

By Manoela Ilic in Playground on
Demo Code

Today we’d like to share a little menu with you. The idea is to reveal the boxes of a grid individually from the top right corner of the page similar to the Expanding Grid Menu we did a while back. The inspiration for this effect and for the slideshow layout comes from Adrián Somoza’s design and Zhenya Rynzhuk’s Dribbble shot. The animations are powered by TweenMax.

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

SlideOutBoxMenu_01

For showcasing the menu, we’ve created a little slideshow. The menu opens when clicking on the + details button on the right side:

SLideOutBoxMenu02

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

We hope you like this little menu effect and find it inspirational!

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.

boxes grid menu

Coding the Sliced Image Hover Effect from Quai Network

shining particles mask by dominik fojcik

Crafting a Dreamy Particle Effect with Three.js and GPGPU

Grid Flow Animation

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.