Drawer menu animations examples


#1

Here are some animations you can try in blocs.


#2

These are great. How would we deploy them in Blocs? I don’t know much code, but am willing to learn if I can improve on the standard blocs hamburger menu…thanks for any specific guidance.

I particularly like: https://codepen.io/GrahamWilsdon/pen/OVoaNQ/


#3

You have to replace the code after you export the final design into html


#4

Oh darn! I was hoping it was for non-coders like me, and something you could do by attaching files within Blocs.

But, if I wanted to give it a go, what steps would I take? I understand some of the basics of HTML and CSS and JS structures, so would I find the same ‘class’ names in all three and completely ‘replace’, as a one-for-one swap out, or is there some other detail that is important to know prior to attempting to do this??

Also, it seems to be that any time there are changes to the bloc file, that you would need to then repeat the same process after exporting the changed Bloc files again. Does that sound correct???

Thanks!


#5

It is the way bootstrap uses single svg for the menu. You need to alter the html code for the toggle button so the menu is divided into span tags so they can animate.


#6

Gosh…I wish that made sense to me. :frowning: