Webflow Burger Menu Build & Animate
HTML-код
- Опубликовано: 28 сен 2024
- Design Direction 009
Lets not just create a boring burger menu. Let's look at how we can push them bit by bit to create more advanced animations.
Check out Webflow: webflow.com/?r...
Joseph Berry has proven experience working with some of the biggest names in the industry. With over 8 years experience Joe will provide inside tips and tricks used in the industry. Currently Jury AWWWARDS
Follow me on
Facebook: / jbgraphicsuk
Dribble: dribbble.com/J...
Behance: www.behance.ne...
Your style, delivery and explanations are fantastic. Great tutorial.
JOSEPH GRAHAM thanks Graham, Im working on some new content. Stay tuned
welcome back! was just about to message you that you've been missed! thanks for this, looking forward to more content and the masterclass, definitely interested. all the best!
omarmb thanks dude. Yer been bit of mad start to the year so just trying to get my feet on the ground again.
I have a problem, I can't move nav-link on y-axis when I want to animate.
*edit: problem solved, nav-link should be display: Block. I think it's worth mentioning.*
Thank you for this.
A tip though, can you show us what it is you will be making at the start of the video? It will help give context
OhWhat World will keep that in mind. Thanks
@@josephberry4188 Yes, love your videos but that would definitely be helpful. Thanks!
ADF A DIFFERENT FUR definitely going to do that next time.
This is exactly what I needed. Maybe add an animation for the menu button
webflow course by Guy Ritchie lol...great work mate.
Wow this is awesome. Can u make tutorial like horizontal scroll (Apple iPad pro)
I started webflow recently, i figure out you.. i think that is best
Cool stuff as always. Btw I promise I'll be the first to sign up for your course, just please tweak your camera and audio setup a little bit :D
Árpád Rácz-Fodor I have a studio that I will be using so the video will be crisp and the vocals tight. Will be doing full production.
These videos are just quick and dirty I would love to invest more time but at the moment it's difficult.
@@josephberry4188 Nice, can't wait for that!
You are super inspiring sir 💙
Thank you 🤗
Hey Joseph! Absolutely awesome tutorial. Got this working and I'm loving it. Question: is there a way for the menu to be in that initial state (unseen) while I'm in the edit mode? Right now I'm unable to edit the actual page underneath it because the menu is defaulted to full screen when I'm not in preview mode.
Yer you need to set it to display none. And then activate this in the interaction.
Great tutorial, thank you. I'm using it for a school project. I have a question about making the menu a symbol, to use in all website pages. How would I go about it? Should I create separate symbols for menu-parent and menu-overlay? Or should they be all in one symbol (I'm not even sure if I can do this)? Thank you very much
SR love you content, your work and your healp
Sebastian Pertuz glad to be off help. Keep pushing those animations 😎
oh i love it, one question, my nav-link Text isn moving when i try to set up the animation. i stuck on that for now
Television Center?!!!
Farhan Munim what you mean? Thats the building I work in.
Farhan Munim ow nice, doing what ?
Farhan Munim omg thats mental. I work for digitas 😂
I seen a lot of burger animations and custom menus etc but they dont actually test them.
The modal was the missing link for me. Thanks.
I appreciate the thoughtful approach to your design. Loo fwd to learning more about your masterclass.
Awesome video. The background image on the overlay is great, just a subtle parallax. The main takeaway is how you start with the basic animation and little tweaks/pushes to make something much more interesting. Keep up the inspiring and encouraging work
Exactly that. Taking something as simple as a burger menu and working out how you can push it just the little bit further. Thanks for watching. More to come.
Thank you so much for this great video.
rich
Very good tutorial JB ! Thanks !
Hi Joseph! thanks for this interesting tutorial. I've got a question about closing the hamburger menu. I made a except replica of your hamburger menu and now i'm trying to use it as a navigator to different sections on the website. I've put the closing interaction on the nav links. When i click the nav link all the links dissappear as expected, except for the menu overlay. Do you know what is causing this problem? thanks in advance
Roel Dekkers not to sure what it could be but most likely the nav links have an interaction which is turning them off via the click.
great to see you back Joseph! really looking forward to the next video's!
Roel Dekkers Thanks Roel, good to be back. Things are a bit crazy but just wanted to put together a quick video for your guys.
Thanks for your work Joseph. Appreciate the effort you put into your videos. Haven't seen you on youtube for quite some time. Hope you are doing well. If you do read the comments, may I ask you for a favour: to make your video on 5 text effects available for saving to playlists. Would love to have in on my webflow playlist but it is set as a Kids content and youtube is not allow you to save it. Cheers.
Thank you very much guy, it's really fine give some advanced advice like this free
How do you make the magnetic burger menu effect you were talking about?
awesome tutorial!
Thanks dude 🙌
thanks a lot for this, I really enjoy the whole process