Animated Responsive Navbar Tutorial
HTML-код
- Опубликовано: 26 мар 2019
- Check out my courses here!
developedbyed.com/
#webdevelopment #css #javascript
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
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!
/ dev_ed
📕 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: github.com/DevEdwin/navbar-ci...
🛴 Follow me on:
Twitter: / deved94
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b... 
Наука
I love that you use HTML, CSS and JavaScript. NO jQuery nor Bootstrap. You explain everything in a easy to understand way. Thanks for sharing the knowledge! :)
Bootstrap & jquery is built in many lines of code... So why use them when we can simply write 30 line of code do our work...
Pi can you write out an example that’s easy to understand?
i need to know make this nav bar fixed
vivek patiz / position:fixed;
yeah every time i need help with all three programming languages i go to him he is my favorite coding youtuber he explain very good
your biggest strength is the positive energy you radiate. keep it up dude
George Smith preach
oOo GOOD COMMENT oOo
exactly what i as going to comment haha
So his nucleus is not stable
navbar does not close on click , help ‼️
Please never stop making videos, cause I really enjoy watching them. So clear, a bit of entertainment here and there, I learn way more stuff watching your videos than what I learn at my college. Please, keep on going making these quality content videos, you're amazing!
I love that how he write codes and laugh all the time.
navbar does not close on click , help ‼️
🙋💞👉ruclips.net/video/HI9ZI8ymxsA/видео.html👈 This is so Good too ...FOR HTML CSS EFFECTS.. Please Check
he is my favorite code, the way to teach and his expressions.
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.
That expansion effect is so cool! Thanks for sharing!
RUclips recommended me this channel a couple days ago and it has become my favorite already. Cheers!
Your analogy/example of clip-path was excellent. Simple, but got the point across perfectly.
Damn this guy has gotten so good. I've started watching his videos from the time he created his channel and he's gotten so good with making them. This is the number one channel for me when it comes to web development and I'd *totally* recommend it to anyone out there who is struggling with web development. 👍
You're amazing man, I love your tutorials!!!
You have a great charisma, i love watching your videos. Not only they are giving me motivation, but also making my mood for the rest of the day
Ikr feel the same
@@janek1822 Yestarday I learned sooo much within a day because of him. Glad that I'm not the only one)
You’re so charming and creative, man! Really cool content.
This is so informative. I have never seen a youtuber explaining in this much detail and that tooo in a fun way. Hands off you are the best.
You got a sub!
Just amazing! It's hard to find people like you these days. It seems that you're showing your true personality and that you really like this.
Awesome video brother. And the ease and with that smiling face with which u explain the code is really appreciatable
I always watch this video because its so easy to follow and for me I learned a lot from this. If I forgot something while making a navbar I just search for this. And I think I can do it now. Thanks Dev Ed!!! I appreciate your videos!!! helps me a lot
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!
I like the way you teach with joy and smile on your face.
I love that you use only html/css/ and Javascript. No libraries. You are legend. Thanks for everyhting
Thank you for creating this tutorial. This helped me finish my first project / portfolio!
Keep up the good work dev dude, we need more people like u.
Hi Ed, i just did my first animated responsive navbar. Your tutorial helped me out so well. Thank you
You are a natural in explaining CSS tricks
You are awesome! I had never used javascript but I'm glad I was able to get a little intro to it in this video (even though I was only copying). Thank you! This animation looks amazing!
Dude, you have been a biggest inspiration until now. Thanks for these playful mini tutorials. Hope you are doing fine my man!
Thanks! This help me a lot and I love the way your guiding throughout the process :)
Really encouraging.please post these type of content regularly
Awesome! Simple, but tricky tutorial. I love this so much
hey man really like the tutorial as well as your presentation that makes it even more interesting. Always keep smiling x
Thank you so much! I'm using this navbar for my future projects, you're awesome! I'd like to have such a great knowledge of coding, especially Javascript
do not copy learn concept I bit u if someone change few codes u be lost in ocean try it body LEARN CONCEPT IF NOT U NEVER GOING TO BE ????
I will follow you in all social media bro truly you are my hero 🙌🙌👏👏👏
Wow. Thank you for sharing. I'm just beginning so this is still out of my league. I do love, however, that the screen where you type the code is perfectly focused and that helps me immensely. Hopefully you have videos for beginners.
very perfect ! i really need this responsive navbar for my project and thanks for your useful tutorials
thank you for making this! i learned that classlist.toggle is a thing!!!! i wrote so many unnecessary things to do that manually
I am loving these tutorials and random joke tangents. The ending had me rolling 😀
clip-path - was new for me. Learnt something new. thanks.
Dude you are amazing! Thank you so much for your videos!
Ed, this was very helpful. Exactly what I needed. Now I am going to play with this and see if I can implement it to my site. Thanks a bunch!
Great refreshing personality for teaching. Nice tutorial. You got a new subscriber.
thank you so much. I was stuck on this for a couple of hours and you helped clarify it.
Thanks for this awesome tutorial! I was able to make this work on my Vue.js project
Hello brother.. you are the only programming youtuber i have ever seen over internet with such an amazing sense you humor..you videos kindaa like comedy part along with cool programming skills...i enjoy watching your video....
A really cool effect. Great walkthrough.
Nice explanation. Love the way how you delivered it.
I love it. Basic and clean explain
1)I typed navbar to search
2)saw some awesome animation on thumbnail- clicked on
3) saw you at the starting of the
4)liked it- know I will enjoy the enjoy the vedio💕
Thats a decent, fun and instructive HTML/CSS/JS tut without any framework, "A capella" lets say. Good job.
You just earned yourself a sub.
Really like your video and the positive energy you exude.
You are the most amazing programmer I have ever seen in my life. Please tell me I'm not the only one who thinks this...
Really very helpful. Thank you and do make such great videos .Your way of explaining is very simple but yet very good. Keep it up
thank you so much for the effort you put into making this video--- it really shows!! you have made it really easy for me to understand difficult concepts :)
Sometimes coding can get a bit tiring, but you always keep me inspired to keep it up. Nice work man!
superb!
ruclips.net/video/vh7obWOC3jY/видео.html
navbar does not close on click , help ‼️
awesome tutorial ed!!
Really nice explanation of the concept
It's the first time i watch JavaScript and CSS together and i like it.
Super cool and faster tutorial! I'm really enjoyed it
I really liked the analogy :D
great vids by the way!
Fantastic tut. Thanks for posting.
you are awesome dude happy to learn this from you.
Salut, Ed. Mulțumesc pentru cursurile tale online. Sunt excelente!
appreciate the videos man, helpful and fun to follow!
I really love your vids, thank you Ed
Just finished it Ed, I love it Sir
I'm from Brazil, and your videos have helped me a lot! thank you
I LIKE THE WAY YOU SMILE. YOU'RE THE BEST.
Awesome tutorial. Great youtuber. Sincerity appreciate your clear way to spread your know how! Kudos for ya.
Man, your vids are awesome. Keep it up!
Sure glad I found this tut. Excellent job, thanks so much.
🙋💞👉ruclips.net/video/HI9ZI8ymxsA/видео.html👈 This is so Good too ...FOR HTML CSS EFFECTS.. Please Checkoo
wow man your explaining and teaching style is awesome :) :)
your design is really cool,i love it ^^
Wow I love how easy you make all this
The content on this channel is soo sick
Your explanations are awesome to understand
Great Style of teaching
love your explanation
No hablo ingles, pero mirando el codigo pude entender, y te admiro por lo pasivo que eres al explicar tu contenido. Saludos.
Most underrated developer channel on RUclips ♥️
Always great to learn something from you Ed and of course get some fun 🤣 , awesome example with mask definition Thanks!
Beautiful and smooth
thanks its amazing what you have done and explain keep it up mate!
Maybe the best video, simple and funny. Thanks, I hope you'll continue to make videos like this.
You are awesome brother. Loved it.
Who disked this amazing tutorial!! Thanks man, very beautiful code!
Awesome. Looking forward to seeing such small tutorials
You got a new sub mate, I was struggling to get a responsive navbar to work cuz its hard if you dont know the little tricks
From Russia with love.Your submission of material is so light and needly.Thanks
Wonderful I enjoyed that tut! Thank you.
You can build the Hamburg button with after and before element and transform them to an X on click and then if you close them by clicking on the X button it transform back to the Hamburg button. Really nice little effect.
Thanks Man!! You really helped me figure out my problem!!
I have no idea what you are talking about but I love it
Thumbs up dev.. Thank you so much for this content.
Awesome tutorial man! Thanks a lot!
wow wow wow i love the way you explaining, i like the idea as well
keep it up.
Nice work man 🔥
Learning something while I have to smile at the same time.
Keep it up!
Thank you very much - best video on the subject
PS: That analogy was just perfect