├── LICENSE
├── index.html
└── styles.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 WebDevSimplified
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
14 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | margin: 0;
9 | }
10 |
11 | :root {
12 | --bar-width: 60px;
13 | --bar-height: 8px;
14 | --hamburger-gap: 6px;
15 | --foreground: #333;
16 | --background: white;
17 | --hamburger-margin: 8px;
18 | --animation-timing: 200ms ease-in-out;
19 | --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
20 | }
21 |
22 | .hamburger-menu {
23 | --x-width: calc(var(--hamburger-height) * 1.41421356237);
24 |
25 | display: flex;
26 | flex-direction: column;
27 | gap: var(--hamburger-gap);
28 | width: max-content;
29 | position: absolute;
30 | top: var(--hamburger-margin);
31 | left: var(--hamburger-margin);
32 | z-index: 2;
33 | cursor: pointer;
34 | }
35 |
36 | .hamburger-menu:has(input:checked) {
37 | --foreground: white;
38 | --background: #333;
39 | }
40 |
41 | .hamburger-menu:has(input:focus-visible)::before,
42 | .hamburger-menu:has(input:focus-visible)::after,
43 | .hamburger-menu input:focus-visible {
44 | border: 1px solid var(--background);
45 | box-shadow: 0 0 0 1px var(--foreground);
46 | }
47 |
48 | .hamburger-menu::before,
49 | .hamburger-menu::after,
50 | .hamburger-menu input {
51 | content: "";
52 | width: var(--bar-width);
53 | height: var(--bar-height);
54 | background-color: var(--foreground);
55 | border-radius: 9999px;
56 | transform-origin: left center;
57 | transition: opacity var(--animation-timing), width var(--animation-timing),
58 | rotate var(--animation-timing), translate var(--animation-timing),
59 | background-color var(--animation-timing);
60 | }
61 |
62 | .hamburger-menu input {
63 | appearance: none;
64 | padding: 0;
65 | margin: 0;
66 | outline: none;
67 | pointer-events: none;
68 | }
69 |
70 | .hamburger-menu:has(input:checked)::before {
71 | rotate: 45deg;
72 | width: var(--x-width);
73 | translate: 0 calc(var(--bar-height) / -2);
74 | }
75 |
76 | .hamburger-menu:has(input:checked)::after {
77 | rotate: -45deg;
78 | width: var(--x-width);
79 | translate: 0 calc(var(--bar-height) / 2);
80 | }
81 |
82 | .hamburger-menu input:checked {
83 | opacity: 0;
84 | width: 0;
85 | }
86 |
87 | .sidebar {
88 | transition: translate var(--animation-timing);
89 | translate: -100%;
90 | padding: 0.5rem 1rem;
91 | padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
92 | background-color: var(--foreground);
93 | color: var(--background);
94 | max-width: 10rem;
95 | min-height: 100vh;
96 | }
97 |
98 | .hamburger-menu:has(input:checked) + .sidebar {
99 | translate: 0;
100 | }
101 |
--------------------------------------------------------------------------------