Travis build: 517

README.md

@@ -43,6 +43,7 @@ See CONTRIBUTING.md for the snippet template.
 <summary>View contents</summary>
 
 * [`Disable selection`](#disable-selection)
+* [`Hamburguer Button`](#hamburguer-button)
 * [`Popout menu`](#popout-menu)
 * [`Sibling fade`](#sibling-fade)
 
@@ -623,6 +624,75 @@ Makes the content unselectable.
 
 <br>[⬆ Back to top](#contents)
 
+### Hamburguer Button
+
+This is a way to build simple hamburger button for menu bar.
+
+```html
+<button class="hb"></button>
+```
+
+```css
+.hb,
+.hb:before,
+.hb:after {
+  position: relative;
+  width: 30px;
+  height: 5px;
+  border: none;
+  outline: none;
+  background-color: #333;
+  border-radius: 3px;
+  transition: 0.5s;
+  cursor: pointer;
+}
+
+.hb:before,
+.hb:after {
+  content: '';
+  position: absolute;
+  top: -7.5px;
+  left: 0;
+}
+
+.hb:after {
+  top: 7.5px;
+}
+
+.hb:hover {
+  background-color: transparent;
+}
+
+.hb:hover:before,
+.hb:hover:after {
+  top: 0;
+}
+
+.hb:hover::before {
+  transform: rotate(45deg);
+}
+
+.hb:hover::after {
+  transform: rotate(-45deg);
+}
+```
+
+
+#### Explanation
+
+
+- Use a `<button>` element for the middle bar of the hamburger icon.
+- Use the `::before` and `::after` pseudo-elements to create the top and bottom bars of the icon.
+- Use `position: relative` on the `<button>` and `position: absolute` on the pseudo-elements to place them appropriately.
+- Use the `:hover` pseudo-selector to rotate `:before` to `45deg` and `:after` to `-45deg` and hide the center bar using`:background-color` transparent.
+
+
+#### Browser support
+
+100.0%
+
+<br>[⬆ Back to top](#contents)
+
 ### Popout menu
 
 Reveals an interactive popout menu on hover and focus.