Sliding Menus became very popular on the mobile space thanks to the Facebook app. Since I developed a solution for the SenchaCon App, and got a lot of requests from attendees to make this public, here it is!

How it works

If you’re eager for the final solution just jump straight to the end. If you want to learn more, bear with me here.

The whole thing is pretty simple once you realize that the menu is always on the screen, but hidden underneath the viewport items. So, the menu is not really pushing content, but the whole content is getting out of the way.

This essentially translate to:

• Add the Menu directly to the viewport and dock it on the left
• Set top, left and bottom configs to 0. Doing so will make the menu a floating component, not taking any space from the actual content
• Make sure the Menu z-index is 0, so it will stay underneath the viewport content
• Whenever the user taps a button to open the menu, you translate the whole inner viewport to the right

Hardware Acceleration Trick

The performance for this menu is really great thanks to its simplicity and GPU acceleration. If you’ve been developing mobile for a while, you might already know that using CSS translate3d property will force hardware acceleration, since it creates a composite layer.

What might be new for you is that forcing this right from the start is better than on demand. There’s a cost in generating a composite layer. If you only create the layer (aka setting a translate3d property) once the user taps the button, it might affect the animation and rendering time. So for the SenchaCon app I prefer to pay the price upfront while the app is initializing and generate the composite layer right from the start:

.viewport-inner {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: all 0.2s;
}

Final Result

You can download the full source code from github.com/brunotavares/SenchaExamples

What about enabling touch dragging?

On the native Facebook menu (and in some user-extensions) users can touch and drag the toolbar to reveal the menu. This adds a lot of extra code to make the card translate follow the user finger and also calculates snapping points.

Plus, it performs great on the latest devices, but the experience on old ones is not that great. In order to keep the user experience in a great level, I just decided not to implement this part. All the comments I got were “This menu works great!” instead of “This thing is not draggable”, so I’m comfortable with the decision.

Hope you liked it :) Ping me if you have questions or found bugs! Fixes are always welcome on Github as well.