Motion UI For Foundation Mobile Menu

Monday, September 22nd, 2014

Lately, I’ve been seeing some chatter about Motion UI. Motion UI is the practice of using subtle animation to give affordance in a User Interface. With Flat Design in full effect, sometimes context can be absent from the UI. Motion helps the user to realize what just happened or where they just came from, thus providing a better User Experience.

What surprises me about Foundation 4 & 5 is that there’s no animation options for their mobile Top Bar menu. By tapping on the Top Bar hamburger menu icon, the menu list snaps open! This can be jarring to the user, so I decided to add a subtle transition easing effect while opening and closing the menu.

Out-of-the-box, Foundation sets a height of 45 pixels on the .top-bar element. You will need to change this property to max-height. I’ll explain later. After you do that, then add the transition CSS as seen below.

.top-bar {
  max-height: 45px;
  -webkit-transition: max-height .3s ease-in-out;
  -moz-transition: max-height .3s ease-in-out;
  -o-transition: max-height .3s ease-in-out;
  transition: max-height .3s ease-in-out;
}

(more…)

Posted in Code, Design, Mobile | No Comments »