Lion Theme is an upcoming WordPress theme designed based on Google’s Material Design. Below you can see a snippet from the Menu Interaction or you can see the video of a live interaction on Twitter or on Facebook.
The floating action button animates into an X while the side nav bar menu pushes the web page content towards right, in an easing and meaningful transition.In this way the menu prevents the content from not being displayed or hidden as long as giving instant access to the menu items for the user.
The transition between those two visual states are clear, smooth, and effortless telling the users where to focus their attention.That motion supports the information hierarchy and animates the elements in coordination, conveying what content is most important by creating a path for the eye to follow.
Floating Hamburger Button
The floating action button has an ink wash upon focus and lifts upon being selected.The “hamburger” icon transforms into an X (Close Button) when clicked to represent it’s current action to close the menu.The FAB (Floating Action Button) menu has a transparent color in order to make the content as visible as possible.
The menu is dynamically change its available and enabled menu items based on the current user interaction with it.Floating buttons give instant access to primary actions such as ‘Search’, ‘Login / Registration’ and ‘Shopping Cart’ while the company logo and its social links are always displayed to encourage its authority.