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-10-11 17:17:10 +03:00
committed by GitHub
parent e5b8f552ba
commit 42886e83ed
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
snippets/hamburger-button.md
View File

@ -56,10 +56,9 @@ This is a way to build simple hamburger button for menu bar.
#### Explanation #### Explanation
- You need one button to middle bar. - Use a `<button>` element for the middle bar of the hamburger icon.
- Use the pseudo-elements `:before` and `:after` to create bar top and bottom. - Use the `::before` and `::after` pseudo-elements to create the top and bottom bars of the icon.
- Keep them in rows using position `:relative` in the `:button` and position `:aboslute` in `:before` and `:after`. - Use `position: relative` on the `<button>` and `position: absolute` on the pseudo-elements to place them appropriately.
- Use `:hover` for rotate `:before` for `45deg`, `:after` to `-45deg` and hide bar center using `:background-color` transparent. - Use the `:hover` pseudo-selector to rotate `:before` to `45deg` and `:after` to `-45deg` and hide the center bar using`:background-color` transparent.
- Bonus: You can use JavaScript to manipulate CSS and keep `:X`.
#### Browser support #### Browser support