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.

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:

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