Expanding Bar Navigation Concept

An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.

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

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.