Material Design Bubble Out Navigation

Community resources Show & Tell
1

Had some fun playing with a little material design navigation piece. Backgrounds are just placeholder. :smile:
Would love to get your thoughts. :smile:
https://webflow.com/website/circle-expand-nav

Thank you,

Waldo :slight_smile:

2 Likes
2

Hehe nice (:

Seems to bug on the first time you click it though.

I’d increase the velocity: a good half the general time for unfolding and keep just a third for folding. With ease cubic for the SNAP! :wink:

3

Thanks @vincent :slight_smile:

I just fixed that bug, had to put a display: none on it and then display block with the animation. Works like a charm now with those ease-in & ease-out cubics :smile:

4

@thesergie I took your advice and went with a more interactive approach :smile:
Thanks again!

Waldo :smile:

5

This is great! Did you do that all via Webflow interactions?

6

Thank you @jdesign :smile: Built 100% in Webflow :smile:

1 Like
7

Looking really good @Waldo_Broodryk :slight_smile: I like it :slight_smile:

1 Like
8

Thank you so much @cyberdave

:slight_smile: thinking about utilizing it to make my first template for submission :slight_smile: will make sure I go through all the steps before I do :smile:

Any advice for additions/changes to the navigation? :smile:

Thank you!

9

Hi @Waldo_Broodryk, I do not really have any specific suggestions, however whenever creating this for a template, make sure to carefully follow the submission guidelines:

http://template-info.webflow.com/submission-guidelines#template-requirements

Follow those requirements and then the template can be given a full review upon submission :smile:

Good luck, I am excited to see what the end result is :smile:

Cheers,
Dave

10

Thank you so much @cyberdave you are the man! :smiley:

Sincerely,

Waldo