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 leanirng CSS now.

Feedback 19

  1. 2

    Really annoying to use, as gorgeous as it is. In order to close the current view I have to move my mouse to the far opposite corner of the screen, then back to the menu… repeat.

  2. 4

    It’s beautiful but I agree the closing of the view needs to be closer to where you clicked to get to it

  3. 6

    The close/collapse icon needs to appear close to the first link clicked.

    Moving all the way to the top corner to navigate around the site is a major pain in the ass.

    • 7

      To all those complainers. Did you guys read,”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.”

      Cheers!

      I kind of made it work (has some issues though)

  4. 10

    Perfectly for separating different holistic (long and relevance optimized) pages! Great inspiration, thanks!

  5. 12

    This is a great tool, thanks! I think the navigation between other pages could be more intuitive.

  6. 13

    While that’s nice accordion work, I wouldn’t call it navigation and IMHO, the accordion-triggers take up so much screen-space that they become undesirable

  7. 14

    I like the concept and see it working on websites with small amounts of menu items. There is still some room for improvement tough. For example:
    I can imagine people want to open AND close the menu by clicking the menu item. Now you have to navigate with your mouse from one corner to the other.

    What might also improve this type of menu is to display all 3 menu items at al times (Displaying menu item 1 on the left and menu item 3 when menu item 2 is opent). This way people can browse easily trough the menu items.

  8. 15

    Looks lovely.

    I clumsily designed a presentation tool for a startup years ago on an expanding concept. It’s not live anymore but here’s a video if people are curious:

    https://vimeo.com/64678656

    Who knows, perhaps I’ll bring it back… haha

  9. 17

    @bobafett and Mary Lou. This is such a fantastic piece of work. I’m not sure why everyone is complaining. This concept has *inspired* me (I believe the term you used was “inspiration” in your disclaimers) to take a different approach with my blog. I’ll make some tweaks and be sure to share. I’ve been coming to Codrops forever, and I’m finally doing the right thing and saying “Thanks!”

  10. 19

    Love it. Looks great and very inspirational. Rather than navigation I could see it being used for slide shows or small “about us” sections

    I’m going to check out the rest of your work now

Follow this discussion

Leave a Comment