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.
SlideOutBoxMenu_featured

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

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 blog updates 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.