There is an issue in Firefox with the first example. Firefox doesn't allow you to style the `x` and `y` - I assumed it did because you can style the `d`... but you know what happens when you assume something. You can use `translateY` instead though.
I am playing around with this and trying to animate a x1 cords. This does not seem to be working under chrome. Am I missing something or is this not possible? EDIT, I can change the x1 cord with javascript using the setAttribute method.
@@danish7335 Thanks for this tip, works for me too. It was doing my head in that Firefox could not do this! And it doesn't break any other browsers I've tried either. All good.
Kevin, was just telling my wife how you are the epitome of finding something, focusing on it primarily, and benefiting massively from that focused content. The genius of it is that everyone needs CSS or one of its offshoots. Your dedication alone has taught me an important lesson.
As an experienced html/css coder I’m still watching your videos sometimes to refresh some details about the stuff I haven’t done for a while, and always find at least some bites of info that I didn’t know or totally forgot ;) It is really nice to see you suggest your viewers the best accessibility practices, I appreciate it a lot. And quality of your videos has grown so much for these years! So a big respect a thank you from me
1:26 quick tip: script tags can be placed in the head and use the “defer” attribute. No need to place at bottom of body anymore. And if “module” is used (in your case), “defer” is the default behavior.
Also to note: "defer" only works for scripts with an "src" tag. Inline scripts with type=text/javascript cannot be deferred; instead you should use a type=module.
Hey Kevin, I’ve been going through your videos for the past few days, working on building up a library of cool looking css that I can use on my own future projects. I appreciate the work you’ve put in. About to add these cool looking hamburger icons to my list! Thank you!
One of my proudest moments was constructing the word 'OPEN' out of little coloured lines which each transformed to form the letter forms of the word 'CLOSE' instead of the classic hamburger. So satisfying.
I found the solution for the second animation where the rotation was not happening from the center. The reason for that is, when we declare the line like: The "center" of this specific line is on the 40% of the overall box. Its center is NOT the container svg, but itself. And so is the same for the other Line. Hence, I used transform: translateY(-10%) and transform:translateY10%) on the lines respectively, during the hover using a variable. it worked.
35:54 I’m missing something , how did the two lines get translated up to the top to draw out the X? I get that their offset goes to .1 but where is the property that moves their y value?
31:00 If the point is that no property is set to change, perhaps you can have a separate animation-direction of normal in the first and reverse in the second one. Or, also, play around with the value of alternate, as someone else brought up here, too.
second example is not centered, because tranform origin center takes center of svg, not center of line. if you want to have x in exact center, you can move end points of the line first to center (similar to fist example) and then rotate, or just calculate endpoints of line i x shape and change coordinates to that, without rotation
I have a note saying “transform-box: fill-box” sets the transform origin on the elements you’re transforming instead of the svg itself but haven’t played around with it
For anyone, who didn't understand what this meant Imagine you have two lines in an SVG. The first line is positioned at 40% from the top, and the second line is at 60% from the top. To make transform-origin: center work, you need to move both lines to the center of the SVG at the end of the animation. For the top line, set --top: 10px; For the bottom line, set --top: -10px; Then, in your animation, use transform: translateY(var(--top));. This will move the top line 10px down (to 50px if the SVG height is 100px) and the bottom line 10px up (also to 50px, centering both lines in the SVG viewbox).
I think you can get rid of the "magic number" if their x and y positions get centered first. Maybe right before they rotate so as they are rotating they shift slightly down and up respectively.
"Helping you fall in love with CSS" is perfect for this channel. I'm your typical MERN stack dev that finds CSS a boring, clunky chore and prefers frameworks. You're slowly converting me to CSS.
53:00 I’m confused why he had to add a current-state attribute to run the animation instead of just changing the button-two animation to run when aria-expanded = true (which happens onClick)? Not challenging, just very new to JS and needing clarification why that wouldn’t work.
Seems like it’s doing something very similar using data-state-= closed, then switching the animation on, on click , with css selector .button-two[data-state=“opened”]. Why can’t that instead be .button-two[aria-expanded=“true”]
Wow, great content, I was scared on messing around with SVG before I watched this. Thank you. Btw, at [7:07] didn't you mean half of the "height"? Half of "x" value doesn't make sense
Hmm, looks like it doesn't like the `y` property, which also breaks the transition for the opacity... Easy fix would be using translate to get it in the right spot instead, which is a little annoying. I know FF supports animating `d`, I guess I shouldn't have assumed that meant it also did the `x`, `y` etc.
This is awesome! Thanks for the video! However I find that transition y attribute of the svg in the first button not working well on IOS / Safari-based browsers. Using transform translate is better on Safari, but not as neat though.
@@KevinPowell I'm used to the exact opposite :D. I put most CSS styling in the CSS (makes most sense to me and is somewhat equivalent to how it's done to HTML).
Hello Kevin quick question just started with CSS two days ago. What extensions do I need to add to VS Code in order to replicate what you´re showing in this video. Love the content btw thanks for making CSS even more interesting to me.
The easy way is to do it with a pseudo-element, and use the SVG in the `content: ` instead of leaving it blank. You can just include the path to the SVG, or you can do a URL encoding which is a bit more work, but pretty sure it's better for performance
@KevinPowell Great tutorials, always so helpful!!! I tried to animate your basic button and when I test in Safari, top and bottom bars merge to the center and animation stop there, any simple solution for that? IPhone13 and IPhone14 with IOS 17.2.1
I use Adobe illustrator and just few days ago i found that we can import path of even complex things i draw into svg on html. Darn it was fun xD, animating my drawing by coding.
To use only one animation in reverse and force the browser to trigger it, maybe you can tweak the value of the duration. Like setting 1.01s on the reverse one ? It is a bit hacky but it can help not clone all your closing and openning keyframes Anyway, thanks for your great videos
Rather than guessing how long an arc is, for a half-circle arc like the one you're doing here, it's basically the size of the arc, divided by 2 (because it's a half-circle), times π. So your guess of 31 pixels is pretty close; 31.416 pixels would be as close as you'd ever need to specify. It's more complicated when both the x and y coordinates change in the arc, but not _that_ much more complicated.
When I use "translateY" I got a bug. The "close" animation is broken on every browser, but Firefox. The "rotate" transition part of the top and bottom line works only when I set aria-expanded to true but when I set it to false they jump horizontal and slides back to their original position. In Firefox the animation is bug free.
how are your pages auto refreshing? I know there's different ways, but i'm curious what you're using. By the way, I love your videos. You're excellent background noise (a high compliment imo! lmao). Your easily absorbed lessons have been a wonderful addition to my learning.
When you defined the svg viewbox coordinates,are all these in device coordinates, i mean pixels or percentages.And if the answer of former question is yes then does not this affect the responsivness?Thank you!
The viewBox coordinates are... svg related, lol. The SVG system lives in it's own world, and we're exposing a part of it. By saying 0 0 100 100, we're effectively making it a percentage based system, since we're working within a space that is 0 -> 100. So, when I set the x="10", it's going 10% over... but if I had the viewBox=0 0 200 200, it would only be 5% over.
@@thedacian123 No. Think of it as whatever you set as the area of the svg, the viewBox divides it into an internal grid. So the CSS box gets internally divided into that many sections/sub-pixels which is the SVG world.
Speaking of icons you have to speak of design. Like designers Katsumi Masaru (Olympic games Tokyo 1964 pictograms) or Otl Aicher (Olympic games Munich 1972, Ulm school of design). Icon animation shall emphasize the meaning of icons (and ui actions) and not just playing around. For example let's discuss the use of an envelope instead of a post horn as icon for email. Then you may animate the envelope with wings or with some putting a letter in a post box.
yeah, I know you can style the `d` property of SVGs in Firefox, so I just assumed you can do them all, apparently you can't do `x` or `y` (going to add a pinned comment to address this too)... you could do the same thing with translateY though
will you ever do a javascript course? i am a beginning front end developer and i have the biggest problems in learning javascript. or maybe you can point me to a good javascript or jquery course?
What kind of glasses do you wear. I noticed that in older videos you don't wear any. I noticed that my eyesight is not as good as it used to be and am wondering how to fix that. I notice I have to focus my eyes more and get tired watching a screen that's never been a issue for me before.
Can anyone verify . . . in Safari 16.0 rotate: 45deg will work on a div (and I assume other elements) but I could not get it to work on the SVG lines? The same code works in Firefox and Chrome.
Regarding the magic number, I watched a video by Web Dev Simplified titled "How To Build An Animated Hamburger Menu With Only CSS", and at 15 minutes, he explains the math behind it(which I still don't understand xD)
The JavaScript to get a bool value instead of a string is have isOpen = getAttribute(‘aria-expanded’) === ‘true’ and that would stay true to conventions with variables starting with is/has is a bool. This would also give you the ability to setAttribute(‘aria-expanded’, !isOpen);
if you wanna use transform-origin: center, why not just move the line to the center with transform: rotate(xdeg) translateY(x); it should still look the same. with these it would just be 10px, and -10px respectively.
@@KevinPowell Well, to be honest it is not too bad but it is kind muddy - not sharp, I can't explain it and English is not my first language... Like your sound is too compressed - low bitrate... I still think that you have turn on some kind noise cancelation while recording that you are not aware of
why are you using const instead of var in javascript? couldn't you just avoid javascript totally? so instead of making an and :active for the css. isn't it a bit too much code for a simple burger?
Well, realistically, if you have a hamburger, it's to open/close a menu, in which case, you should be using a button and not a link. Doing this with a link and using :active would make it faster to make for the examples, but wouldn't really be the best advice in the long run... but that's also why I used hover at the start and saved the JS for the end, so you could skip that if you wanted to. Also, in general in JS, `var` is a little bit "out of date". You can still use it, but it's generally safer to either use `let` or `const`. If it's a variable that needs to be updated, you use `let`, if the value never changes, then `const`. In this case, each time the function runs, the value is static, so const is perfect.
@@KevinPowell if i use the attribute role="button" on the a-element it should be fine, or is it not? when i learned PHP my teacher told me to never if possible use static variables except with paths (with define in PHP). was my teacher wrong? i also learned it with other languages, too. I'm a bit confused now
@@HomerJSimpson999 role="button" is a very last case that needs a lot to add in the other expected functionality of a button, like keyboard interactions as well. An a tag should be a link, going somewhere, a button should be a button that you add interaction with JS.
I feel like frontend devs are allergic to math :p why playing around with numbers when you can just.. calculate them real easy haha but it works, so i should probably learn from this
Thanks Kevin, your ability, passion and patience are much appreciated. As a comedic aside, every time you said 'hamburger', this scene came to mind ... ruclips.net/video/L6Q9WHbg_CI/видео.html 😄
very kewl videos, friend. please be one of my professors @ college lol :/ learn a lot for free from youtube learn nothing for a lot of $ @ college fml!
There is an issue in Firefox with the first example. Firefox doesn't allow you to style the `x` and `y` - I assumed it did because you can style the `d`... but you know what happens when you assume something. You can use `translateY` instead though.
I am playing around with this and trying to animate a x1 cords. This does not seem to be working under chrome. Am I missing something or is this not possible?
EDIT, I can change the x1 cord with javascript using the setAttribute method.
or u can do `y:45px`
@@danish7335 this one solved the issue for me too! it would be great to understand why there's this problem with Firefox
@@danish7335 Thanks for this tip, works for me too. It was doing my head in that Firefox could not do this! And it doesn't break any other browsers I've tried either. All good.
@@stevemarshall5249 Pleasure
Kevin, was just telling my wife how you are the epitome of finding something, focusing on it primarily, and benefiting massively from that focused content. The genius of it is that everyone needs CSS or one of its offshoots. Your dedication alone has taught me an important lesson.
So glad that you like my approach!
As an experienced html/css coder I’m still watching your videos sometimes to refresh some details about the stuff I haven’t done for a while, and always find at least some bites of info that I didn’t know or totally forgot ;) It is really nice to see you suggest your viewers the best accessibility practices, I appreciate it a lot. And quality of your videos has grown so much for these years! So a big respect a thank you from me
1:26 quick tip: script tags can be placed in the head and use the “defer” attribute.
No need to place at bottom of body anymore.
And if “module” is used (in your case), “defer” is the default behavior.
Also to note: "defer" only works for scripts with an "src" tag. Inline scripts with type=text/javascript cannot be deferred; instead you should use a type=module.
You make me fly!!!!! CSS is so much fun.. Thanks for being part of my journey. So appreciated.
Hey Kevin, I’ve been going through your videos for the past few days, working on building up a library of cool looking css that I can use on my own future projects. I appreciate the work you’ve put in. About to add these cool looking hamburger icons to my list!
Thank you!
Totally worth the hour-long watch! Learned so much and excited to try it out. Thanks!
One of my proudest moments was constructing the word 'OPEN' out of little coloured lines which each transformed to form the letter forms of the word 'CLOSE' instead of the classic hamburger. So satisfying.
mind sharing the code?
@@RonnieNissan #2 would be also interested in seeing how it´s done (and obviously stealing it for my website :p)
get on codepen's plz and give us the source ;p
RUclips keeps deleting my replies! But I put it on Kevin's dis cord, in the showcase section.
It's also searchable on codepen with the title "Open Close Toggle Navigation Animation"
here i am playing around with svg's and out pops your video on svg hamburger icons, perfect timing, great video Kevin
I've started on my web dev journey, and your content and lessons are helping so much. Thank you for all your work and looking forward to much more!
I found the solution for the second animation where the rotation was not happening from the center. The reason for that is, when we declare the line like:
The "center" of this specific line is on the 40% of the overall box. Its center is NOT the container svg, but itself. And so is the same for the other Line. Hence, I used transform: translateY(-10%) and transform:translateY10%) on the lines respectively, during the hover using a variable. it worked.
The default fill in svg is "currentcolor" so you can use the color property instead of custom props if you like.
This was a fun code along. Thanks, Kevin!🤘
What a video! Thanks for the work you put into putting these out on a regular basis.
Thank you for sharing your knowledge with us I appreciate it. This is really pro stuff for free.
35:54 I’m missing something , how did the two lines get translated up to the top to draw out the X? I get that their offset goes to .1 but where is the property that moves their y value?
After watching through again it was the rotate property
It’s Kevin “The CSS Legend” Powell, Everyone! I love CSS and I love your videos! Great job, my brother.💪I’m a fan! 🙌
I loved that, thanks for sharing your knowledge!
31:00 If the point is that no property is set to change, perhaps you can have a separate animation-direction of normal in the first and reverse in the second one. Or, also, play around with the value of alternate, as someone else brought up here, too.
Arclength in this case is quite easy, d = 20 -> r = 10, Outline = 2 * Pi * r, so half circle = Pi * r = 31.4159
second example is not centered, because tranform origin center takes center of svg, not center of line. if you want to have x in exact center, you can move end points of the line first to center (similar to fist example) and then rotate, or just calculate endpoints of line i x shape and change coordinates to that, without rotation
Brilliant! Thanks for finding that. My brain was dying trying to figure out why.
how would that look in code, understand what youre saying just cant picture it #newdevoverhere
thnx in advance
I have a note saying “transform-box: fill-box” sets the transform origin on the elements you’re transforming instead of the svg itself but haven’t played around with it
For anyone, who didn't understand what this meant
Imagine you have two lines in an SVG. The first line is positioned at 40% from the top, and the second line is at 60% from the top.
To make transform-origin: center work, you need to move both lines to the center of the SVG at the end of the animation.
For the top line, set --top: 10px;
For the bottom line, set --top: -10px;
Then, in your animation, use transform: translateY(var(--top));.
This will move the top line 10px down (to 50px if the SVG height is 100px) and the bottom line 10px up (also to 50px, centering both lines in the SVG viewbox).
30:58 regarding the animation I think you can use 'alternate' to switch between forwards and backwards state so you don't have to build both ones
@34:22 Essentially the VS Code icon. Kind of neat.
I think you can get rid of the "magic number" if their x and y positions get centered first. Maybe right before they rotate so as they are rotating they shift slightly down and up respectively.
Thank you Kevin, I am lucky tbh finding your channel
"Helping you fall in love with CSS" is perfect for this channel. I'm your typical MERN stack dev that finds CSS a boring, clunky chore and prefers frameworks. You're slowly converting me to CSS.
the falling in love with css is a complete fail with me, but this channel is a win in my book anyway :D Kevin is a staple for web devs
Awesome. I thought svgs were way more complex.. thank you for this video ✌🏼
53:00 I’m confused why he had to add a current-state attribute to run the animation instead of just changing the button-two animation to run when aria-expanded = true (which happens onClick)?
Not challenging, just very new to JS and needing clarification why that wouldn’t work.
Seems like it’s doing something very similar using data-state-= closed, then switching the animation on, on click , with css selector .button-two[data-state=“opened”]. Why can’t that instead be .button-two[aria-expanded=“true”]
Thank you for including some accessibility content! I hadn't found anything related yet!
You're to smart Kevin! Mighty!
Hello Kevin, thank you for another great video
Must-have tutorial! ❤❤❤ Can you combine it with the "popover" attribute?
Today I learnt svg properties can be controlled in css 🤯. Thanks Kevin
Wow, great content, I was scared on messing around with SVG before I watched this. Thank you.
Btw, at [7:07] didn't you mean half of the "height"? Half of "x" value doesn't make sense
CSS master! thank you!
Hi Kevin - on my machine, in your codepen, the first hamburger is broken in FF. Working fine in Chrome and Edge.
Hmm, looks like it doesn't like the `y` property, which also breaks the transition for the opacity... Easy fix would be using translate to get it in the right spot instead, which is a little annoying. I know FF supports animating `d`, I guess I shouldn't have assumed that meant it also did the `x`, `y` etc.
MAn,you blew my mind again😀!
i really wanna know what the 5 people who disliked this video were thinking about, like this is Gold
awesome. its those little touches that give apps that well needed polish :) also love SVG's
great video kevin.
This is awesome! Thanks for the video! However I find that transition y attribute of the svg in the first button not working well on IOS / Safari-based browsers. Using transform translate is better on Safari, but not as neat though.
11:01: Why do you style svg with attributes instead of CSS?
I guess it could have been in the CSS... I'm just used to having most SVG stuff in the avg itself I guess
@@KevinPowell I'm used to the exact opposite :D.
I put most CSS styling in the CSS (makes most sense to me and is somewhat equivalent to how it's done to HTML).
awesome video
Kevin you are awesome
Second one is the best. Maybe you can make 4 lines, once hovered they become two and then apply this animation.
Hello Kevin quick question just started with CSS two days ago. What extensions do I need to add to VS Code in order to replicate what you´re showing in this video. Love the content btw thanks for making CSS even more interesting to me.
hey how to bind svgs to a class so in any element i added class that svg will be applied , like bootstrap icons
The easy way is to do it with a pseudo-element, and use the SVG in the `content: ` instead of leaving it blank.
You can just include the path to the SVG, or you can do a URL encoding which is a bit more work, but pretty sure it's better for performance
now you can do this and show us how to put it in a resposive nav bar :)
@KevinPowell
Great tutorials, always so helpful!!!
I tried to animate your basic button and when I test in Safari, top and bottom bars merge to the center and animation stop there, any simple solution for that? IPhone13 and IPhone14 with IOS 17.2.1
I use Adobe illustrator and just few days ago i found that we can import path of even complex things i draw into svg on html. Darn it was fun xD, animating my drawing by coding.
did i just watch a full 1 hour css tutorial and... enjoyed it???
if he had one button more there would be only one line 😆 - good vid
To use only one animation in reverse and force the browser to trigger it, maybe you can tweak the value of the duration. Like setting 1.01s on the reverse one ? It is a bit hacky but it can help not clone all your closing and openning keyframes
Anyway, thanks for your great videos
That’s a great hack! Personally I always trigger a reflow with JS by accessing the offsetWidth property on the element in the event handler function.
@@dave6012 Yeah but here, this is a css only approach (even if we have to handle the click in the end)
Kevin Powell's video is a CCS comedy stand-up and lecture on SVG.
Rather than guessing how long an arc is, for a half-circle arc like the one you're doing here, it's basically the size of the arc, divided by 2 (because it's a half-circle), times π. So your guess of 31 pixels is pretty close; 31.416 pixels would be as close as you'd ever need to specify.
It's more complicated when both the x and y coordinates change in the arc, but not _that_ much more complicated.
Kevin, you da man. Love your channel 👍
what do you use for the live preview?
Length of the Arc is half the circumference of a circle with diameter 20. So 1/2 * 20 * π = 10 * π ~ 31.415
When I use "translateY" I got a bug. The "close" animation is broken on every browser, but Firefox. The "rotate" transition part of the top and bottom line works only when I set aria-expanded to true but when I set it to false they jump horizontal and slides back to their original position. In Firefox the animation is bug free.
how are your pages auto refreshing? I know there's different ways, but i'm curious what you're using.
By the way, I love your videos. You're excellent background noise (a high compliment imo! lmao). Your easily absorbed lessons have been a wonderful addition to my learning.
I'm using Vite for my demos these days, and sometimes I still use the Live Server extension in VS Code
why didn't you use the y values instead of the rotate on the second one?
When you defined the svg viewbox coordinates,are all these in device coordinates, i mean pixels or percentages.And if the answer of former question is yes then does not this affect the responsivness?Thank you!
The viewBox coordinates are... svg related, lol. The SVG system lives in it's own world, and we're exposing a part of it. By saying 0 0 100 100, we're effectively making it a percentage based system, since we're working within a space that is 0 -> 100. So, when I set the x="10", it's going 10% over... but if I had the viewBox=0 0 200 200, it would only be 5% over.
@@KevinPowell OK,but what does svg width attr mean-that svg box is 250 px(user devices coords)?
@@thedacian123 No. Think of it as whatever you set as the area of the svg, the viewBox divides it into an internal grid. So the CSS box gets internally divided into that many sections/sub-pixels which is the SVG world.
Which framework are you using to style the menu??
Hi Kevin,
Very good video,
Could you make one about how to make svg ?
Thank you 🙂
I have a series on svgs where I cover the basics. It's a bit old, but I think it stands up well
Speaking of icons you have to speak of design. Like designers Katsumi Masaru (Olympic games Tokyo 1964 pictograms) or Otl Aicher (Olympic games Munich 1972, Ulm school of design). Icon animation shall emphasize the meaning of icons (and ui actions) and not just playing around. For example let's discuss the use of an envelope instead of a post horn as icon for email. Then you may animate the envelope with wings or with some putting a letter in a post box.
i appreciate it
@kevin BUG in first SVG in Firefox. Somehow it does not take the transform-origin: center in Firefox
yeah, I know you can style the `d` property of SVGs in Firefox, so I just assumed you can do them all, apparently you can't do `x` or `y` (going to add a pinned comment to address this too)... you could do the same thing with translateY though
Just wanted to know if this is in any of your courses?
No, my courses tend to be more big picture, and I don't really go much into animations
@@KevinPowell thank you for the response.
Please do videos on web accessibility.
Why would you use aria vs data attributes?
will you ever do a javascript course? i am a beginning front end developer and i have the biggest problems in learning javascript. or maybe you can point me to a good javascript or jquery course?
What kind of glasses do you wear. I noticed that in older videos you don't wear any. I noticed that my eyesight is not as good as it used to be and am wondering how to fix that. I notice I have to focus my eyes more and get tired watching a screen that's never been a issue for me before.
Can anyone verify . . . in Safari 16.0 rotate: 45deg will work on a div (and I assume other elements) but I could not get it to work on the SVG lines? The same code works in Firefox and Chrome.
0:13 Good tip: don't put your tone in the middle of a sentence. 👍
Regarding the magic number,
I watched a video by Web Dev Simplified titled "How To Build An Animated Hamburger Menu With Only CSS", and at 15 minutes, he explains the math behind it(which I still don't understand xD)
Congratulations.
♥️
The JavaScript to get a bool value instead of a string is have isOpen = getAttribute(‘aria-expanded’) === ‘true’ and that would stay true to conventions with variables starting with is/has is a bool. This would also give you the ability to setAttribute(‘aria-expanded’, !isOpen);
Ah, yeah, that's great 👍
@@KevinPowell I tried this not working for me
The custom property is unnecessary IMHO. You can use just currentColor inline for SVG and just set up color for the button.
if you wanna use transform-origin: center, why not just move the line to the center with transform: rotate(xdeg) translateY(x); it should still look the same. with these it would just be 10px, and -10px respectively.
Has anyone else had issues with the first example in Safari? The animation is completely different.
Why does sound on your videos are so bad? Are you using some noise canceling filter?
Nope, and I didn't think it was too bad??
@@KevinPowell Well, to be honest it is not too bad but it is kind muddy - not sharp, I can't explain it and English is not my first language... Like your sound is too compressed - low bitrate... I still think that you have turn on some kind noise cancelation while recording that you are not aware of
`fill="currentColor"` + CSS `color: xxx` is a bit more convenient ways to control button's color, than using CSS props directly
can you do a video on styling tables in css.
seems to be one of the most common requests, so I guess I'll have to do it at one point, lol
Nice 'Hamurger' icons! :P (yes, Kevin you made a typo)
The link to the "complete responsive navigation" is actually here ruclips.net/video/HbBMp6yUXO0/видео.html
I tried this on ChatGPT it gave me a correct hamburger icon but it didn't animate into x properly.
...so our job is still safe. for now. lol
Just animate the d attribute with gsap and copilot bro. Ezz 🙂
why are you using const instead of var in javascript? couldn't you just avoid javascript totally? so instead of making an and :active for the css. isn't it a bit too much code for a simple burger?
Well, realistically, if you have a hamburger, it's to open/close a menu, in which case, you should be using a button and not a link. Doing this with a link and using :active would make it faster to make for the examples, but wouldn't really be the best advice in the long run... but that's also why I used hover at the start and saved the JS for the end, so you could skip that if you wanted to.
Also, in general in JS, `var` is a little bit "out of date". You can still use it, but it's generally safer to either use `let` or `const`. If it's a variable that needs to be updated, you use `let`, if the value never changes, then `const`. In this case, each time the function runs, the value is static, so const is perfect.
@@KevinPowell if i use the attribute role="button" on the a-element it should be fine, or is it not? when i learned PHP my teacher told me to never if possible use static variables except with paths (with define in PHP). was my teacher wrong? i also learned it with other languages, too. I'm a bit confused now
@@HomerJSimpson999 role="button" is a very last case that needs a lot to add in the other expected functionality of a button, like keyboard interactions as well. An a tag should be a link, going somewhere, a button should be a button that you add interaction with JS.
I feel like frontend devs are allergic to math :p
why playing around with numbers when you can just.. calculate them real easy haha
but it works, so i should probably learn from this
yummy
Early :3
Nice title-tag of the index.html: *Hamurger icons* (typo on the right side)
Thanks Kevin, your ability, passion and patience are much appreciated.
As a comedic aside, every time you said 'hamburger', this scene came to mind ... ruclips.net/video/L6Q9WHbg_CI/видео.html 😄
Kevin Powell posted 1 hour long video on RUclips. Also, Web Dev Simplified posted 1 hour long video.
Just saying :)
That Kyle is copying me? 😉😂
Early 😎
pacman -Syu
@@tapank415 emerge --sync && emerge -uDUN @world
ARGHH ALMOST FIRST BECAME THIRD
very kewl videos, friend.
please be one of my professors @ college
lol :/
learn a lot for free from youtube
learn nothing for a lot of $ @ college
fml!
Is anyone scared like me? I kept saying in my mind "this is too much".
I am new to CSS.