diff --git a/README.md b/README.md index b75eb6db4..172b14385 100644 --- a/README.md +++ b/README.md @@ -627,53 +627,45 @@ Makes the content unselectable. ### Hamburger Button -This is a way to build simple hamburger button for menu bar. +Displays a hamburger menu which transitions to a cross on hover. ```html - +
+
+
+
+
``` ```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; +.hamburger-menu { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; + height: 2.5rem; + width: 2.5rem; cursor: pointer; } -.hb:before, -.hb:after { - content: ''; - position: absolute; - top: -7.5px; - left: 0; +.hamburger-menu .bar { + height: 5px; + background: black; + border-radius: 5px; + margin: 3px 0px; + transform-origin: left; + transition: all 0.5s; } -.hb:after { - top: 7.5px; -} - -.hb:hover { - background-color: transparent; -} - -.hb:hover:before, -.hb:hover:after { - top: 0; -} - -.hb:hover::before { +.hamburger-menu:hover .top { transform: rotate(45deg); } -.hb:hover::after { +.hamburger-menu:hover .middle { + opacity: 0; +} + +.hamburger-menu:hover .bottom { transform: rotate(-45deg); } ``` @@ -682,16 +674,21 @@ This is a way to build simple hamburger button for menu bar. #### Explanation -- Use a `", - "css": ".hb,\n.hb:before,\n.hb:after {\n position: relative;\n width: 30px;\n height: 5px;\n border: none;\n outline: none;\n background-color: #333;\n border-radius: 3px;\n transition: 0.5s;\n cursor: pointer;\n}\n\n.hb:before,\n.hb:after {\n content: '';\n position: absolute;\n top: -7.5px;\n left: 0;\n}\n\n.hb:after {\n top: 7.5px;\n}\n\n.hb:hover {\n background-color: transparent;\n}\n\n.hb:hover:before,\n.hb:hover:after {\n top: 0;\n}\n\n.hb:hover::before {\n transform: rotate(45deg);\n}\n\n.hb:hover::after {\n transform: rotate(-45deg);\n}", + "html": "
\n
\n
\n
\n
", + "css": ".hamburger-menu {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: space-between;\n height: 2.5rem;\n width: 2.5rem;\n cursor: pointer;\n}\n\n.hamburger-menu .bar {\n height: 5px;\n background: black;\n border-radius: 5px;\n margin: 3px 0px;\n transform-origin: left;\n transition: all 0.5s;\n}\n\n.hamburger-menu:hover .top {\n transform: rotate(45deg);\n}\n\n.hamburger-menu:hover .middle {\n opacity: 0;\n}\n\n.hamburger-menu:hover .bottom {\n transform: rotate(-45deg);\n}", "js": "", - "scopedCss": "[data-scope=\"hamburger-button\"] .hb,\n[data-scope=\"hamburger-button\"] .hb:before,\n[data-scope=\"hamburger-button\"] .hb:after {\n position: relative;\n width: 30px;\n height: 5px;\n border: none;\n outline: none;\n background-color: #333;\n border-radius: 3px;\n transition: 0.5s;\n cursor: pointer; }\n\n[data-scope=\"hamburger-button\"] .hb:before,\n[data-scope=\"hamburger-button\"] .hb:after {\n content: '';\n position: absolute;\n top: -7.5px;\n left: 0; }\n\n[data-scope=\"hamburger-button\"] .hb:after {\n top: 7.5px; }\n\n[data-scope=\"hamburger-button\"] .hb:hover {\n background-color: transparent; }\n\n[data-scope=\"hamburger-button\"] .hb:hover:before,\n[data-scope=\"hamburger-button\"] .hb:hover:after {\n top: 0; }\n\n[data-scope=\"hamburger-button\"] .hb:hover::before {\n transform: rotate(45deg); }\n\n[data-scope=\"hamburger-button\"] .hb:hover::after {\n transform: rotate(-45deg); }\n" + "scopedCss": "[data-scope=\"hamburger-button\"] .hamburger-menu {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n justify-content: space-between;\n height: 2.5rem;\n width: 2.5rem;\n cursor: pointer; }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu .bar {\n height: 5px;\n background: black;\n border-radius: 5px;\n margin: 3px 0px;\n transform-origin: left;\n transition: all 0.5s; }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu:hover .top {\n transform: rotate(45deg); }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu:hover .middle {\n opacity: 0; }\n\n[data-scope=\"hamburger-button\"] .hamburger-menu:hover .bottom {\n transform: rotate(-45deg); }\n" }, "tags": [ "interactivity", @@ -841,10 +841,10 @@ ] }, "meta": { - "hash": "952fe17aa1f9856b3976d74578db84e409a7439d0ded80195b7d5420ea95d5ae", + "hash": "06f323835f89d7e055e932ee67c23a9c5d2edeb7e62c1029c0528238e17a08f8", "firstSeen": "1570668578", - "lastUpdated": "1573762725", - "updateCount": 6 + "lastUpdated": "1574679180", + "updateCount": 11 } }, { @@ -871,8 +871,8 @@ }, "meta": { "hash": "bff0b57d24dac06ae6a6d71a8d0d628ec0b97760be0cfda66791191957075d73", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -900,8 +900,8 @@ }, "meta": { "hash": "4136aff34ae1b8bf6b525c08881a12c43e9ce7265e864c09ea25fa40e8d86396", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -929,8 +929,8 @@ }, "meta": { "hash": "6e8a53b0b69ab05f54c199f42944746c0e3331712f69a8dc72709eda16428424", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -958,8 +958,8 @@ }, "meta": { "hash": "2f925cc190a9744532de97bb4add65e53cc0b2f3833760f4e7263f5df17cfad5", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1018,7 +1018,7 @@ }, "meta": { "hash": "97fbac82b526cafe6e48233dda46d0bb87fde7a52027774048b90c9c14818395", - "firstSeen": "1567098755", + "firstSeen": "1567099321", "lastUpdated": "1567151937", "updateCount": 3 } @@ -1077,7 +1077,7 @@ }, "meta": { "hash": "847dbaae8802781fa073cc92c6891ea0a0c39752f95266fcb4db7812dc78640e", - "firstSeen": "1567098755", + "firstSeen": "1567099321", "lastUpdated": "1569415890", "updateCount": 3 } @@ -1107,7 +1107,7 @@ }, "meta": { "hash": "a718446c91f49c73e68bc4f317911ff03f898ac8efe0e832ca1f803709107820", - "firstSeen": "1567098755", + "firstSeen": "1567099321", "lastUpdated": "1571634867", "updateCount": 3 } @@ -1136,7 +1136,7 @@ }, "meta": { "hash": "e25bdb353dc5da5c1c359f91769d85d0b3b0a58ff7085041603e4e685b380ef7", - "firstSeen": "1567098755", + "firstSeen": "1567099321", "lastUpdated": "1567155517", "updateCount": 3 } @@ -1165,8 +1165,8 @@ }, "meta": { "hash": "46d1f9e1a05328d86ffda0dbea7dc60eae44c319eb430632ef384d2f3e7e6d44", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1194,8 +1194,8 @@ }, "meta": { "hash": "fb3a96cbbb4d59af2566f3d0729c13478a81a572b25a8dd1696e2a67dd8fff79", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1253,8 +1253,8 @@ }, "meta": { "hash": "f9542b2db5cd49f09e53b3af8348c58c973244bdeede87857e49660c6e713d65", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1282,8 +1282,8 @@ }, "meta": { "hash": "0b86c444f4d15709a99d1e32c651e9530a294258ba32784d998a56c6f14198b1", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1311,8 +1311,8 @@ }, "meta": { "hash": "35bfb52929dcbd21c120d555c9d3382154f47b661d31722ffb3d21281021bba3", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1340,8 +1340,8 @@ }, "meta": { "hash": "97b037f3f463b8cf7de0cc12a607c540ffe8a4869323a4cc17c66eebbc92d612", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1400,8 +1400,8 @@ }, "meta": { "hash": "e29182514bd83550705267a43d21eec8886ed011c6259f2b3efec9862541f90e", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1429,8 +1429,8 @@ }, "meta": { "hash": "9ee4bb8713d24b9e6f5367eb05645c6e41d205b120b4d06a9a949984c7cd73b0", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1488,8 +1488,8 @@ }, "meta": { "hash": "357daaf44bab240518a3c9bdd34a1e8702fab3358171e30f633b7a7f423b9884", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1517,8 +1517,8 @@ }, "meta": { "hash": "a30287149e833b454deea446359d51554640ad3a57cd2460d8519c376077b8b4", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1546,8 +1546,8 @@ }, "meta": { "hash": "4ce872446c7950c9450e56ab2251c7cfcd473a1c9b2a64baa7c9d6b029264796", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }, @@ -1575,8 +1575,8 @@ }, "meta": { "hash": "43bc0cd7776468f3b74791017349ef278921c8ded7ba0bd7788d2b01bdb68c7a", - "firstSeen": "1567098755", - "lastUpdated": "1567098755", + "firstSeen": "1567099321", + "lastUpdated": "1567099321", "updateCount": 2 } }