Create an Animated Hamburger using HTML5 and CSS3
We will create an interesting animated hamburger that can be used in websites. In this process, we will look at transitions and transformations in CSS3.
Further Links:
- https://codepen.io/tag/hamburger%20menu/
- https://codepen.io/designcouch/pen/Atyop
very nice. which code editor and context sensitive plugins were used in the recording
very nice. which code editor and context sensitive plugins were used in the recording
I used Visual Studio Code as the eidotr. There were no plugins used. It just works out of the box. :)
i wrote it up in angular 5
https://stackblitz.com/edit/hamburger-component?file=app/hamburger.component.ts
i wrote it up in angular 5
https://stackblitz.com/edit/hamburger-component?file=app/hamburger.component.ts
Great work Victor.
Why are you using div#ham instead button, that is how people learn bad practices...
Why are you using div#ham instead button, that is how people learn bad practices...
Hi Stoyan, Generally Button comes with a lot of default styling. It's a good to use div in this case. Though we can restyle the button if you check major sites such as Google, you'll find that they use div for Hamburger menus.
Why are you using div#ham instead button, that is how people learn bad practices...
Hi Stoyan, Generally Button comes with a lot of default styling. It's a good to use div in this case. Though we can restyle the button if you check major sites such as Google, you'll find that they use div for Hamburger menus.
I understand your point, but using DIV instead of BUTTON is totally wrong from an accessibility point of view. I see how people start copy/paste the code. When Google uses div for the hamburger they usually put ARIA attributes.
Why are you using div#ham instead button, that is how people learn bad practices...
Hi Stoyan, Generally Button comes with a lot of default styling. It's a good to use div in this case. Though we can restyle the button if you check major sites such as Google, you'll find that they use div for Hamburger menus.
I understand your point, but using DIV instead of BUTTON is totally wrong from an accessibility point of view. I see how people start copy/paste the code. When Google uses div for the hamburger they usually put ARIA attributes.
I understand your concerns, but the lesson was aimed at teaching the animation