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 in Playground on
demo github

From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.

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

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

References and Credits

Tagged with:

Expanding Rounded Menu Animation

Tiny Grid Layout Animation

Inline Layout Switch Ideas

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

From our sponsor
Divi
Create websites rapidly
With the Divi Layout Packs you'll get more than 800 world-class designs ready to be used for your client projects. Try it for free →