From d2afcfb68680f76c7ac2a5af7d478ce7cb1b2a5e Mon Sep 17 00:00:00 2001 From: Jeconias Santos Date: Wed, 9 Oct 2019 21:49:38 -0300 Subject: [PATCH 1/4] Added simple way to build hamburger button. --- snippets/hamburger-button.md | 64 ++++++++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 snippets/hamburger-button.md diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md new file mode 100644 index 000000000..b5ce02ff8 --- /dev/null +++ b/snippets/hamburger-button.md @@ -0,0 +1,64 @@ +--- +title: Hamburguer Button +tags: interactivity,beginner +--- + +This is a way to build simple hamburger button for menu bar. + +```html +
+ + + +
+``` + +```css +.hb-container { + width: 30px; + height: 30px; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.hb-container span { + width: 30px; + height: 5px; + border-radius: 3px; + margin: 2px 0; + background-color: #333; + transition: 0.5s; +} + +.hb-container:hover span { + margin: 0; +} +.hb-container:hover :nth-child(2) { + opacity: 0; +} +.hb-container:hover :first-child { + position: absolute; + transform: rotate(-45deg); +} +.hb-container:hover :last-child { + position: absolute; + transform: rotate(45deg); +} +``` + +#### Explanation + +- You need of two ou three `:span` to stack. +- Keep them in rows using `:display-flex`. +- Use `:hover` for rotate first `:span` for `-45deg` and last `45deg`. +- If you use three `:span`, use `:opacity` for hide the middle child of container. +- Bonus: You can use JavaScript to manipulate CSS and keep `:X`. + +#### Browser support + +- https://caniuse.com/#search=transform +- https://caniuse.com/#search=display%20flex \ No newline at end of file From e2c42276beb46fc092a29916f86cc037031b1a85 Mon Sep 17 00:00:00 2001 From: Jeconias Santos Date: Thu, 10 Oct 2019 18:16:51 -0300 Subject: [PATCH 2/4] Changed spans to pseudo-elements. #161 --- snippets/hamburger-button.md | 71 ++++++++++++++++++------------------ 1 file changed, 36 insertions(+), 35 deletions(-) diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index b5ce02ff8..e5d92329c 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -6,59 +6,60 @@ tags: interactivity,beginner This is a way to build simple hamburger button for menu bar. ```html -
- - - -
+ ``` ```css -.hb-container { - width: 30px; - height: 30px; +.hb, +.hb:before, +.hb:after { position: relative; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + width: 30px; + height: 5px; + padding: 2px; + border: none; + outline: none; + border-radius: 3px; + transition: 0.5s; cursor: pointer; } -.hb-container span { - width: 30px; - height: 5px; - border-radius: 3px; - margin: 2px 0; - background-color: #333; - transition: 0.5s; +.hb:before, +.hb:after { + content: ''; + position: absolute; + top: -7.5px; + left: 0; } -.hb-container:hover span { - margin: 0; +.hb:after { + top: 7.5px; } -.hb-container:hover :nth-child(2) { - opacity: 0; + +.hb:hover { + background-color: transparent; } -.hb-container:hover :first-child { - position: absolute; - transform: rotate(-45deg); + +.hb:hover:before, +.hb:hover:after { + top: 0; } -.hb-container:hover :last-child { - position: absolute; + +.hb:hover::before { transform: rotate(45deg); } + +.hb:hover::after { + transform: rotate(-45deg); +} ``` #### Explanation -- You need of two ou three `:span` to stack. -- Keep them in rows using `:display-flex`. -- Use `:hover` for rotate first `:span` for `-45deg` and last `45deg`. -- If you use three `:span`, use `:opacity` for hide the middle child of container. +- You need one button to middle bar. +- Use the pseudo-elements `:before` and `:after` to create bar top and bottom. +- Keep them in rows using position `:relative` in the `:button` and position `:aboslute` in `:before` and `:after`. +- Use `:hover` for rotate `:before` for `45deg`, `:after` to `-45deg` and hide bar center using `:background-color` transparent. - Bonus: You can use JavaScript to manipulate CSS and keep `:X`. #### Browser support - -- https://caniuse.com/#search=transform -- https://caniuse.com/#search=display%20flex \ No newline at end of file From e5b8f552baf71c9eb9af49fa9d256497ade12e04 Mon Sep 17 00:00:00 2001 From: Jeconias Santos Date: Fri, 11 Oct 2019 11:10:23 -0300 Subject: [PATCH 3/4] Fix problem with the button. #161 --- snippets/hamburger-button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index e5d92329c..cb574859c 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -16,9 +16,9 @@ This is a way to build simple hamburger button for menu bar. position: relative; width: 30px; height: 5px; - padding: 2px; border: none; outline: none; + background-color: #333; border-radius: 3px; transition: 0.5s; cursor: pointer; From 42886e83ed20a0a3e62f5e09429274f770a454e8 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 11 Oct 2019 17:17:10 +0300 Subject: [PATCH 4/4] Update hamburger-button.md --- snippets/hamburger-button.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index cb574859c..3b46d9907 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -56,10 +56,9 @@ This is a way to build simple hamburger button for menu bar. #### Explanation -- You need one button to middle bar. -- Use the pseudo-elements `:before` and `:after` to create bar top and bottom. -- Keep them in rows using position `:relative` in the `:button` and position `:aboslute` in `:before` and `:after`. -- Use `:hover` for rotate `:before` for `45deg`, `:after` to `-45deg` and hide bar center using `:background-color` transparent. -- Bonus: You can use JavaScript to manipulate CSS and keep `:X`. +- Use a `