Expanding Bar Navigation Concept

Go to Source

ExpandingBarMenus_800x600

View demo Download source

Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation is either shown in a vertical or horizontal orientation. For this experiment we are using anime.js.

Attention: As we usually do with our Playground demos, this is mainly made for visual effect inspiration, not as a ready-to-use plug’n play component. Modern browsers only.

Here’s a preview of the demos for the view when the navigation is closed and open:

ExpandingBarMenus_01

ExpandingBarMenus_02

ExpandingBarMenus_03

ExpandingBarMenus_04

For the third demo, we’re not showing the navigation by default. There is a menu button at the bottom of the page and once clicked, the navigation appears in the center of the page.

ExpandingBarMenus_05

ExpandingBarMenus_06

ExpandingBarMenus_07

We hope you find this little experiment inspirational!

References and Credits









View demo Download source

Expanding Bar Navigation Concept was written by Mary Lou and published on Codrops.


Go to Source