andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update hamburger-button.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-11-25 12:53:00 +02:00
committed by GitHub
parent 186de7bd69
commit 62ceca5ca6
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
snippets/hamburger-button.md
View File

@ -48,14 +48,14 @@ Displays a hamburger menu which transitions to a cross on hover.
#### Explanation #### Explanation
- Use a `hamburger-menu` container div which contains the top, bottom, and middle bars. - Use a `.hamburger-menu` container `div` which contains the top, bottom, and middle bars.
- The container is set to be a flex container (`display: flex`) with `flex-direction` to be `column` and `flex-wrap` to be `wrap` (alternatively, you can set both properties by a shorthand `flex-flow: column wrap`). - The container is set to be a flex container (`display: flex`) with `flex-direction` to be `column` and `flex-wrap` to be `wrap` (alternatively, you can set both properties by a shorthand `flex-flow: column wrap`).
- Add distance between the bars using `justify-content: space-between`. - Add distance between the bars using `justify-content: space-between`.
- The animation has 3 parts: top and bottom bars transforming to 45 degree angles (`rotate(45deg)`), and the middle bar fading away by setting the `opacity: 0`. - The animation has 3 parts: top and bottom bars transforming to 45 degree angles (`rotate(45deg)`), and the middle bar fading away by setting `opacity: 0`.
- The `transform-origin` is set to `left` so the bars rotate around the left point. - The `transform-origin` is set to `left` so the bars rotate around the left point.
- Set `transition all 0.5s` so that both `transform` and `opacity` are properties are animated for half a second. - Set `transition all 0.5s` so that both `transform` and `opacity` properties are animated for half a second.
#### Browser support #### Browser support
- Flexbox - https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
- CSS Transitions - https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions