Facebook Paper Menu Code

Image for Facebook Paper Menu Code

After having a little down time between development sprints, I wanted to get my hands dirty making a new style of navigation. I really like the search navigation in the Facebook Paper app, so I figured I’d give it a shot. You can play with the result below.

See the Pen Facebook Paper Inspired Menu by Intuitive Company (@intuitive) on CodePen.

I wanted to utilize nice, smooth transitions through CSS and the best way to do that is with CSS transform properties such as transform: translate3d(); There is very little javascript used to make this all happen. As an added bonus I created an awesome menu icon animation that changes from a ‘Hamburger’ to a close icon.

I’m pretty happy with the result and this pen was featured on the front page of codepen.io, which is pretty sweet!

popular pens

About the Author

Image of Matt Lewis

Matt Lewis

UX Developer

As a developer with a background in design, Matt is another "double threat" on our team. More