Navigation Menu (A.K.A. Facebook Menu)

[former_member195559]

Recently I worked on development on a hybrid mobile application that is based on Sencha Touch Framework.  One of the requirements was the introduction of a navigation menu that would allow the user to navigate from any view to any view. As this was an upgrade of an already existing application that was already quite huge with a lot of views, the introduction of such a requirement was one of the most tedious tasks I faced. For a better idea of what the navigation menu looks like, just observe the menu of some of the regularly used mobile applications such as YouTube. Or here's a link to a demo - Test Sencha Apps.

    

One can implement this through various ways. Since I was caught in a situation where the framework version did not support such controls, I had to create such a control from scratch - using CSS transitions.

Now the key point here to note is that it is not the menu that is translated on top of out current view. The menu is always there! Always behind your current view! What is actually translated is the view from left to right (if your menu is on the left and vice versa). Here's a code snippet for css transition of your view.

@-webkit-keyframes slideout {

  from {

    -webkit-transform: translateX(0px);

  }

  to {

    -webkit-transform: translateX(300px);

  };

}

@-webkit-keyframes slidein {

  from {

    -webkit-transform: translateX(300px);

  }

to {

  -webkit-transform: translateX(0px);

  };

}

.slide.out {

  -webkit-animation-name: slideout;

  -webkit-transform: translateX(285px);

  animation-fill-mode:forwards;

  -webkit-animation-fill-mode: forwards;

}

.slide.in {

  -webkit-animation-name: slidein;

  -webkit-transform: translateX(0px);

  animation-fill-mode:forwards;

  -webkit-animation-fill-mode: forwards;

}

Just add the css class 'in' or 'out' and remove the class 'out' or 'in' RESPECTIVELY based on whether you want the menu to close or open RESPECTIVELY. Again let me point out when we say 'menu open', it actually means the view sliding out of the viewport or the screen.

The above code will translate your view in the horizontal direction. If you want to do so for a vertical transition, just use translateY.

You can also do a diagonal translation to fit your needs.

Hope this helps!