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: | 115 / 239 |
| Version history: | 13 change(s) |
| Referenced in: | [show references] |