From 62ceca5ca64de249cf3f2638c62e3b53a868a4f0 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 25 Nov 2019 12:53:00 +0200 Subject: [PATCH] Update hamburger-button.md --- snippets/hamburger-button.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index 7f0d6fa52..71b886baf 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -48,14 +48,14 @@ Displays a hamburger menu which transitions to a cross on hover. #### 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`). - 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. -- 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 -- Flexbox - https://caniuse.com/#feat=flexbox -- CSS Transitions - https://caniuse.com/#feat=css-transitions +- https://caniuse.com/#feat=flexbox +- https://caniuse.com/#feat=css-transitions