Basic, Intermediate & Pro animated hamburger icons
HTML-код
- Опубликовано: 26 июл 2024
- SVG’s open up new possibilities that we can’t do with regular divs or spans, and they are a great way to make hamburger menu’s a little bit more interesting!
🔗 Links
✅ SVG path builder - mavo.io/demos/svgpath/
✅ Code from this video: codepen.io/kevinpowell/pen/gO...
⌚ Timestamps
00:00 - Introduction
01:01 - What we’re starting with and setting up the first button
02:36 - Creating the first SVG
07:13 - General styling for all our buttons
09:39 - Styling and animating the first button
18:25 - Creating the second SVG
22:41 - Styling and animating the second button
35:53 - Creating the third SVG
42:02 - Styling and animating the third button
49:08 - Writing the JavaScript
56:29 - Making the second animation more interesting
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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!
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.
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
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"
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!
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!
The default fill in svg is "currentcolor" so you can use the color property instead of custom props if you like.
Arclength in this case is quite easy, d = 20 -> r = 10, Outline = 2 * Pi * r, so half circle = Pi * r = 31.4159
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.
here i am playing around with svg's and out pops your video on svg hamburger icons, perfect timing, great video Kevin
I loved that, thanks for sharing your knowledge!
Thank you for sharing your knowledge with us I appreciate it. This is really pro stuff for free.
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
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
Thank you Kevin, I am lucky tbh finding your channel
Awesome. I thought svgs were way more complex.. thank you for this video ✌🏼
Thank you for including some accessibility content! I hadn't found anything related yet!
Hello Kevin, thank you for another great video
"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.
@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.
CSS master! thank you!
Today I learnt svg properties can be controlled in css 🤯. Thanks Kevin
great video kevin.
MAn,you blew my mind again😀!
You're to smart Kevin! Mighty!
awesome. its those little touches that give apps that well needed polish :) also love SVG's
Second one is the best. Maybe you can make 4 lines, once hovered they become two and then apply this animation.
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
Kevin you are awesome
awesome video
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 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.
Great!!
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.
Kevin, you da man. Love your channel 👍
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.
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.
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)
i really wanna know what the 5 people who disliked this video were thinking about, like this is Gold
Kevin Powell's video is a CCS comedy stand-up and lecture on SVG.
instead of transform origin, just use the flex box. display: flex; align-items:center; justify-content:center; Even if those elements have position absolut, flex box will still work. But you'll need to do it properly. At almost all animations that needs to be in the center, I use flex box.
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
@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
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.
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
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.
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
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
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.
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)
Length of the Arc is half the circumference of a circle with diameter 20. So 1/2 * 20 * π = 10 * π ~ 31.415
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
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
what do you use for the live preview?
now you can do this and show us how to put it in a resposive nav bar :)
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
Which framework are you using to style the menu??
`fill="currentColor"` + CSS `color: xxx` is a bit more convenient ways to control button's color, than using CSS props directly
Man, I had a dream that all my organs inmy body were positioned by css
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.
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.
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.
Please do videos on web accessibility.
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
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?
@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
The custom property is unnecessary IMHO. You can use just currentColor inline for SVG and just set up color for the button.
Why would you use aria vs data attributes?
♥️
Which screen recording tool do you use?
OBS 🙂
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).
Congratulations.
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.
Just animate the d attribute with gsap and copilot bro. Ezz 🙂
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”]
Nice 'Hamurger' icons! :P (yes, Kevin you made a typo)
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.
Has anyone else had issues with the first example in Safari? The animation is completely different.
Nice title-tag of the index.html: *Hamurger icons* (typo on the right side)
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
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
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
0:13 Good tip: don't put your tone in the middle of a sentence. 👍
yummy
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? 😉😂
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 😄
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.
Early :3
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
Early 😎
pacman -Syu
@@tapank415 emerge --sync && emerge -uDUN @world
Is anyone scared like me? I kept saying in my mind "this is too much".
I am new to CSS.
ARGHH ALMOST FIRST BECAME THIRD