Motion UI For Foundation Mobile Menu

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;
}

Foundation also sets a height of auto on the .top-bar.expanded element. You will need to change this property to max-height as well. CSS Transition will only work if you set a fixed height or max-height, but if you set a fixed height and need to add menu items later, you will need to change the css to the new height that includes the new menu items. By setting a max-height to a ridiculous number, in my case 6000 pixels, you allow for extensibility.

.top-bar.expanded{
  max-height: 6000px;
}

It’s important to set the transition-property to max-height, so that it matches the start and stop max-height properties. There are solutions that included javascript, but I found that it’s as simple as changing 2 lines of existing CSS and adding 4 more lines to the Foundation Top Bar component.

You can see my implementation of it at freeskateparks.com.

While doing research for this post, I found that Foundation is on the forefront of Motion UI with Foundation for Apps: Motion UI is the New Flat. Also, it seems that Grant Liddall has been doing UI Motion Design for years. He has a great post titled Motion Ui Design Principles. Check it out!

What are your thoughts on Motion UI?