Animated Responsive Navbar Tutorial

45
29



Check out my courses here!

#webdevelopment #css #javascript

Today we are going to create an animated responsive navbar with html css and javascript. We are going to use flexbox to structure our navbar and css media queries to toggle the burger menu from desktop to mobile.

Rather than having a typical slide out navbar we are going to implement an expanding circle animation using clip-path.

If you are interested in learning/creating a responsive navbar then I highly recommend you downloading the starter files bellow.

❤Become a patreon for exclusive videos and more!

📕 Things covered in this video:

– How to create a responsive navbar
– Adding animation using clip-path
– Using CSS media queries

📔 Materials used in this video:

Starter Files:

🛴 Follow me on:

Twitter:
Github:

🎵 Music:

Outro:
LAKEY INSPIRED – Me 2 (Feat. Julian Avila)
Music By:

Intro:
Dj Quads
Track Name: “Every Morning”
Music By: Dj Quads @

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0

Nguồn: https://quydinh.com

Xem thêm bài viết khác: https://quydinh.com/cong-nghe

45 COMMENTS

  1. Margin-left to auto at 5:40, shifting the nav links all the way to the right, blew my mind. Just getting into flexbox now though, is display: flex the reason for that?

  2. Man I love this stuff. I can't do stuff like this on my own yet but it makes me motivated to keep learning so one day I can. When you're studying the boring basics you need to be able to visualize to what end you're learning all of it and to me this is creativity is what I wish to achieve.

  3. This is the difference how real front end and backend try to code web.

    Front end: in 22 minutes can make beautiful responsive navbar with animation
    Me (backend trying front end): Struggling how to center my div for hours.

    Just kidding. It's just me that code web really bad HAHA

  4. One thing I try to do in most projects is keep the animations under .3s. It feels more responsive as in fast and performant. But slower gives a more awing experience!

  5. Thank you for this. I'm new to coding, this helped a lot! I was getting frustrated centre aligning things but this video give the additional infos I was looking for!

  6. I like it too but in some of ur video. Like to Do video u left project with problem and u going to fast less describing we know by now you know a lot but please make video in one subject u guys are confusing people who are interested to learn now you are in udemy make good js video when I learn I will do it this way I take few thing with JS like function variable arrays and couple others which are being used in most of websites/webpage a lot people so not know the difference between web site and web page no one need to know about asynchronous/none in the beginning so that please design a small project to subject u like to make video about it plz do not waste ur time and our time don't give me wrong u are doing good job but is not great teaching all if u seeing $ sign which is great u can not be every where at same time I like u a lot but urcteaching is lacking focus like ur video about absolute and relative in case was truble.good luck I keep watching you.

  7. О да, очень круто, наконец-то нашёл кого-то кто показывает как писать компоненты, а не копировать их с bootstrap/vuetify.

  8. A really great vid. I appreciate that you didnt use bootstrap. You explained it really well. But i would really love if you will also show your exacutions too

  9. i have a question, what if i want that opened navigation will automatically closed/disappear when i have done clicking one of the navigation?

  10. I have a question sir, how can you close the .nav-links.open after clicking the a tag? It's stressing me out, I'm a newbie btw. 😔

  11. Thank you so much for this demonstration! I currently am working on coding a website for a college class project. I do have a question regarding the functions of the different buttons in this page. Say you only wanted the hamburger on the top right that has the property of opening and closing, what would you get rid of to allow this function to only happen for the page itself?
    Thank you in advance!

  12. how do you get the navbar to slide back again after clicking on one of the links inside it? Im not changing pages, just moving to an anchor further down the page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here