Material Design Menu Interaction in Upcoming WordPress Theme (Video)

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.

Screen Behavior

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.

 

material-design-menu-interaction-wordpress

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.

post-preview-1

Navigation

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.

 

post-preview-3

This one was a little snippet from the hundreds of features of this Multipurpose WordPress Theme.Lion Theme will be soon available for purchased and will be sold exclusively on theme forest.

If you liked this post or want to stay tuned for upcoming snippets Follow us on Twitter or like our page on Facebook.

One response on “Material Design Menu Interaction in Upcoming WordPress Theme (Video)

  1. Red

    Круто! Пробуем!

Leave a Reply