Libraryless. Click here for Pure Java version (3449L/19K).
| 1 | sclass HHamburgerIcon {
 | 
| 2 | S moreContent = ""; | 
| 3 | |
| 4 |   S css() {
 | 
| 5 | ret [[ | 
| 6 |       .hamburger-menu {
 | 
| 7 | cursor: pointer; | 
| 8 | position: absolute; | 
| 9 | right: 10px; | 
| 10 | top: 10px; | 
| 11 | } | 
| 12 | |
| 13 |       .hamburger-menu .bar1, .hamburger-menu .bar2, .hamburger-menu .bar3 {
 | 
| 14 | width: 35px; | 
| 15 | height: 5px; | 
| 16 | background-color: #333; | 
| 17 | margin: 6px 0; | 
| 18 | transition: 0.4s; | 
| 19 | |
| 20 | /* glowing outline? */ | 
| 21 | border: 2px solid #dadada; | 
| 22 | border-radius: 5px; | 
| 23 | } | 
| 24 | |
| 25 |       .hamburger-menu-open .bar1 {
 | 
| 26 | -webkit-transform: rotate(-45deg) translate(-9px, 6px); | 
| 27 | transform: rotate(-45deg) translate(-9px, 6px); | 
| 28 | } | 
| 29 | |
| 30 |       .hamburger-menu-open .bar2 {opacity: 0;}
 | 
| 31 | |
| 32 |       .hamburger-menu-open .bar3 {
 | 
| 33 | -webkit-transform: rotate(45deg) translate(-13px, -13px); | 
| 34 | transform: rotate(45deg) translate(-13px, -13px); | 
| 35 | } | 
| 36 | ]]; | 
| 37 | } | 
| 38 | |
| 39 |   S html() {
 | 
| 40 | ret hcss(css()) + htmlOnly(); | 
| 41 | } | 
| 42 | |
| 43 |   S htmlOnly() {
 | 
| 44 | ret div( | 
| 45 | inner(), | 
| 46 | class := "hamburger-menu", | 
| 47 | onclick := onclick()); | 
| 48 | } | 
| 49 | |
| 50 |   swappable S inner() {
 | 
| 51 | ret emptydiv(class := "bar1") | 
| 52 | + emptydiv(class := "bar2") | 
| 53 | + emptydiv(class := "bar3") | 
| 54 | + moreContent; | 
| 55 | } | 
| 56 | |
| 57 |   swappable S onclick() {
 | 
| 58 |     ret [[this.classList.toggle("hamburger-menu-open");]];
 | 
| 59 | } | 
| 60 | } | 
download show line numbers debug dex old transpilations
Travelled to 4 computer(s): bhatertpkbcr, mowyntqkapby, mqqgnosmbjvj, pyentgdyhuwx
No comments. add comment
| Snippet ID: | #1032364 | 
| Snippet name: | HHamburgerIcon | 
| Eternal ID of this version: | #1032364/14 | 
| Text MD5: | 697aee01b937eca68a8db1ef189fb21e | 
| Transpilation MD5: | 9709ed37d445493aae16d34fbf1bfea1 | 
| Author: | stefan | 
| Category: | javax | 
| Type: | JavaX fragment (include) | 
| Public (visible to everyone): | Yes | 
| Archived (hidden from active list): | No | 
| Created/modified: | 2021-09-01 16:44:18 | 
| Source code size: | 1400 bytes / 60 lines | 
| Pitched / IR pitched: | No / No | 
| Views / Downloads: | 391 / 587 | 
| Version history: | 13 change(s) | 
| Referenced in: | [show references] |