CSS transforms, transitions and animations can really bring your pages to life! While you don't want to over do it, the example hamburger icon and dropdown menu we will create in this tutorial are frequent targets for CSS animation. If you are just starting with CSS, I suggest going to the beginning of this CSS for Beginners series playlist here: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Hi, can you please explain why is at 33:10 applied "position: absolute;" , what is the purpose of it, I don't get the idea...? Also never has been used positioning like "top: 0 or left: 0...", but "transform: translate(-20px, 12px)". Thank you!
Thank you very much for the lesson Dave! I practiced a lot and posted a video of me replicating the animated hamburger menu from scratch on my channel. 🥰
Hi Dave, I was reviewing the code again and I am amazed how '.menu-icon .menu-icon::before .menu-icon::after' and '.closeMenuBtn' are focus:within at the same time! How does that happen? because one set used 'header-title-line:focus-within' and other 'header:focus-within'...Please share the working behind this...
Hey Dave, at 47:28 you add transform: rotate(720deg) and I have two questions: 1. There is no ";" sign at the end, why does this work? 2. There is no transition property added, yet the button is spinning. How come? Where is it picking the transition from? Thanks a lot!
1. Looks like I just missed putting the semicolon ; there. It is the last rule in the block so it doesn't cause an issue but it is usually added to the end of all rules. 2. It is due to the transform. Look at the example on MDN and make some of your own to check out the possibilities: developer.mozilla.org/en-US/docs/Web/CSS/transform
Very nice intro to animation, maybe it worth noting that using transform is more efficient than using width/height/left/top for animation as it doesn't cause page reflow/repaint and can benefit from GPU acceleration (or at least that's what I understand) When menu button is focused, clicking it again will not hide the menu as expected when the x symbol is formed, in theory this can be simply achieved by covering the menu button by a transparent div so clicking the menu button once again (the transparent div actually) will un-focus the menu and as a result the nav will be closed, anyway, since the nav is displayed on header:hover we'll run into infinite loop of showing/hiding the nav and a changing of html structure might be a must, Thanks Dave, and sorry for the long comment
No apologies necessary my friend! These are great additions! You are right about the X, and the addition of JS would be typical to change the behavior - but I really like your workaround suggestion using only CSS! Good stuff!! 💯
Follow up: I've got your suggestion working by only adding a button element to the HTML for the close button. In the CSS, I'm using adjacent selectors. I'll add this update to the final project. Thanks Ahmad! 🙏💯🚀
@@DaveGrayTeachesCode Great, I've used similar technique for things other than menu too, for example, in image lightbox, we can make an image get bigger on focus and then clicking a dummy button will steal the focus from it and make it get back to it's initial state, Thanks for the update, and have a nice day/evening my friend
Still can’t believe this was 2years over, from the simplicity of your teaching style to how you carry us along like babies each time you use the Ctrl Z, C,, and tell us what it does it shows your personality I and I appreciate your humility,, you’ve set me up a different career,, thank you for all you do. God bless you.. where somewhere in Africa 🫡
The CSS video series really helps me a lot! While around 35:15 , I have a question that in the case of the menu-icon div (empty content), what is the default absolute ::before and ::after position of the menu-icon div? I've found that in this video their default position are the same and seems to be center of the menu-icon div and not sure if i understand correctly or there are some rules describing this. Thank you very much!
The menu drops down when you hover over any part of the header. I want the menu to only drop down when I hover over the menu button. I tried: :is(.menu-button:hover, .menu-button:focus-within) nav { display: block; } The menu icon responds, but the menu doesn't drop down. Does anyone know why and how I can do this?
There is a twist on this using adjacent selectors in the bonus lesson for this series which would be lesson 25: th-cam.com/video/VzkWH7mJpe8/w-d-xo.html
Around 34:40, I briefly mention they "start in the middle" - so translateX is needed as -20px to send it to the left edge. translateY is set to -12px to send it 12px above the middle line. Using both x and y values together just requires translate(-20px, -12px)
Hi Dave! Great content, I love the course. However, it is a little misleading sometimes. In this video, for example, a CSS reset is applied at the beginning and there is no margin or padding applied in the starters code but somehow when you opened the page on chrome, it had some margin applied to it. I'm a little confused here.
Thank you, Honami. I must respectfully disagree about your misleading comment. All of the source code I use is displayed in the video and is available at the course resources link in the description. I am not applying any code that is not visible or not available to you.
The detail in the tutorial is amazing Dave! So much priceless information in a tutorial! I am trying to retain most of it but getting overwhelmed. How does it come naturally on the go?
This is really awesome tutorial. Thank you. Mobile nav menu has animation when it's opening. It would be great and consistent to have delayed transition animation when it's closing. I mean sliding up.
@@DaveGrayTeachesCode Would it be possible to do another accessible video. Desktop through to mobile. please. Maybe worth linking to a course that you may be offering. Why not make money, init. Do a course and I'll sign up.
That's an amazing tutorial! Thank you so much Dave! I followed all the steps and after all modified a little bit the menu to occupy 50% of the screen (the right part). I still couldn't figure out how to make the menu disappear in a smooth manner, more or less the same way as it pops-up.
CSS transforms, transitions and animations can really bring your pages to life! While you don't want to over do it, the example hamburger icon and dropdown menu we will create in this tutorial are frequent targets for CSS animation. If you are just starting with CSS, I suggest going to the beginning of this CSS for Beginners series playlist here: th-cam.com/play/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit.html
Dave I am from Africa and you have really impacted my life. Thanks and if you believe in God, God bless you
Josiah, I am so glad I have helped you! Thank you for the note! 🙏🙏
I took HTML full course and now I am about to finish CSS full course. In about a week, i have learned a lot! Thanking you.
You're welcome! 💯
Hi, can you please explain why is at 33:10 applied "position: absolute;" , what is the purpose of it, I don't get the idea...? Also never has been used positioning like "top: 0 or left: 0...", but "transform: translate(-20px, 12px)". Thank you!
Wow, Dave! Yet another fantastic tutorial! You make animations seem all too easy -ha! …. I appreciate all your efforts, as always… Cheers 💖!
Thank you for the kind words! 🙏🙏
Progress over Perfection, thank you sir Dave!
You're welcome! 🙏
Awesome!
(..although, again, my only true hope is that I'll be able to do it all by myself..)
Thank you very much for the lesson Dave! I practiced a lot and posted a video of me replicating the animated hamburger menu from scratch on my channel. 🥰
Nice work!
Hi Dave, I was reviewing the code again and I am amazed how '.menu-icon .menu-icon::before .menu-icon::after' and '.closeMenuBtn' are focus:within at the same time!
How does that happen? because one set used 'header-title-line:focus-within' and other 'header:focus-within'...Please share the working behind this...
i have a problem with my code i dont know if i miss an extension but its not executed correctly for this video
I love your style of teaching, currently doing the html full course, so I am going to save this video, thank you🙏🏽
You're welcome, Faatima! I record the full CSS series to follow the HTML series. 💯
This is a really cool effect with the menu and the icon!
Thank you! 💯
Hey Dave, at 47:28 you add transform: rotate(720deg) and I have two questions:
1. There is no ";" sign at the end, why does this work?
2. There is no transition property added, yet the button is spinning. How come? Where is it picking the transition from?
Thanks a lot!
1. Looks like I just missed putting the semicolon ; there. It is the last rule in the block so it doesn't cause an issue but it is usually added to the end of all rules.
2. It is due to the transform. Look at the example on MDN and make some of your own to check out the possibilities: developer.mozilla.org/en-US/docs/Web/CSS/transform
Very nice intro to animation,
maybe it worth noting that using transform is more efficient than using width/height/left/top for animation as it doesn't cause page reflow/repaint and can benefit from GPU acceleration (or at least that's what I understand)
When menu button is focused, clicking it again will not hide the menu as expected when the x symbol is formed,
in theory this can be simply achieved by covering the menu button by a transparent div so clicking the menu button once again (the transparent div actually) will un-focus the menu and as a result the nav will be closed,
anyway, since the nav is displayed on header:hover we'll run into infinite loop of showing/hiding the nav and a changing of html structure might be a must,
Thanks Dave, and sorry for the long comment
No apologies necessary my friend! These are great additions! You are right about the X, and the addition of JS would be typical to change the behavior - but I really like your workaround suggestion using only CSS! Good stuff!! 💯
Follow up: I've got your suggestion working by only adding a button element to the HTML for the close button. In the CSS, I'm using adjacent selectors. I'll add this update to the final project. Thanks Ahmad! 🙏💯🚀
@@DaveGrayTeachesCode Great, I've used similar technique for things other than menu too,
for example, in image lightbox, we can make an image get bigger on focus and then clicking a dummy button will steal the focus from it and make it get back to it's initial state,
Thanks for the update, and have a nice day/evening my friend
Still can’t believe this was 2years over, from the simplicity of your teaching style to how you carry us along like babies each time you use the Ctrl Z, C,, and tell us what it does it shows your personality I and I appreciate your humility,, you’ve set me up a different career,, thank you for all you do. God bless you.. where somewhere in Africa 🫡
The CSS video series really helps me a lot! While around 35:15 , I have a question that in the case of the menu-icon div (empty content), what is the default absolute ::before and ::after position of the menu-icon div? I've found that in this video their default position are the same and seems to be center of the menu-icon div and not sure if i understand correctly or there are some rules describing this. Thank you very much!
your lessons are great sir.. no words to say. Thank you very much.. i love this course ❤❤❤❤❤
i learned a lot about CSS animations and transformations in this lesson. Another well explained lesson at each step.
Just as always, great work, Dave!
Thank you, Bohdan! 🙏
great!
Thank you!
The menu drops down when you hover over any part of the header. I want the menu to only drop down when I hover over the menu button. I tried:
:is(.menu-button:hover, .menu-button:focus-within) nav {
display: block;
}
The menu icon responds, but the menu doesn't drop down. Does anyone know why and how I can do this?
There is a twist on this using adjacent selectors in the bonus lesson for this series which would be lesson 25: th-cam.com/video/VzkWH7mJpe8/w-d-xo.html
@@DaveGrayTeachesCode Thank you Dave. Another question: 34:29. Why were the .menu-icon:before and after shifted to the right relative to .menu-icon?
Around 34:40, I briefly mention they "start in the middle" - so translateX is needed as -20px to send it to the left edge. translateY is set to -12px to send it 12px above the middle line. Using both x and y values together just requires translate(-20px, -12px)
@@DaveGrayTeachesCode I see! Thank you Dave. :-)
Amazing
I don't feel the 48 minutes.
Thank you for the kind words!
love-it!
Thank you, Guy! 💯
Hi Dave! Great content, I love the course. However, it is a little misleading sometimes. In this video, for example, a CSS reset is applied at the beginning and there is no margin or padding applied in the starters code but somehow when you opened the page on chrome, it had some margin applied to it. I'm a little confused here.
Thank you, Honami. I must respectfully disagree about your misleading comment. All of the source code I use is displayed in the video and is available at the course resources link in the description. I am not applying any code that is not visible or not available to you.
The detail in the tutorial is amazing Dave! So much priceless information in a tutorial! I am trying to retain most of it but getting overwhelmed. How does it come naturally on the go?
It takes time, repetition and usage - and then I still look up things on MDN all the time.
GOD!
thanks very important video
Most welcome!
This is really awesome tutorial. Thank you. Mobile nav menu has animation when it's opening. It would be great and consistent to have delayed transition animation when it's closing. I mean sliding up.
A good suggestion! Maybe I can fit that into the final project 🚀
Good powerful video Thanks Dave gray
Much appreciated!
@@DaveGrayTeachesCode Hi Dave gray
This is the forst time i am seeing a detailed build of hamburger menu with CSS..wow. thanks a lot Dave
You're welcome!
Can I exit the menu dropdown with the escape key?
No, that is something that would need to be implemented with Javascript.
@@DaveGrayTeachesCode Would it be possible to do another accessible video. Desktop through to mobile. please. Maybe worth linking to a course that you may be offering. Why not make money, init. Do a course and I'll sign up.
@@DaveGrayTeachesCode Is that the thing that needs to be considered for accessibility
👍👍👍
That's an amazing tutorial! Thank you so much Dave! I followed all the steps and after all modified a little bit the menu to occupy 50% of the screen (the right part).
I still couldn't figure out how to make the menu disappear in a smooth manner, more or less the same way as it pops-up.
Ok, I see already that you have answered my questions in the newest CSS-video from July, 26th! :)
You're welcome! 💯