1/*
2Minimal Hamburger Overlay Navigation Drawer In CSS
3
4https://www.cssscript.com/hamburger-overlay-navigation-drawer/
5
6
7*/
8
9.test {
10    border: 1px dashed red;
11}
12
13.mh-menu {
14    position: fixed;
15    bottom: 48px;
16    right: 0;
17    /* left */
18    /* background: __background_alt__; */
19    /* height: 100vh; 전체 높이로 하려면 */
20    width: 0;
21    display: flex;
22    align-items: center;
23    justify-content: center;
24    text-align: center;
25    opacity: 0;
26    transition: all var(--menu-speed) ease;
27}
28
29.mh-menu>div {
30    position: relative;
31    top: 0;
32    left: 0;
33    /* height: 100%; */
34    /* width: 100%; */
35    width: 0;
36    height: 0;
37    flex: none;
38    display: flex;
39    overflow: hidden;
40    align-items: center;
41    justify-content: center;
42    text-align: center;
43    opacity: 0;
44    transition: opacity 0.4s ease-in;
45}
46
47.mh-menu ul {
48    list-style: none;
49    padding: 0;
50    margin-right: 10px;
51}
52
53.mh-menu li {
54    padding: 1em 0;
55}
56
57.mh-menu>div a {
58    text-decoration: none;
59    color: #fafafa;
60    /* font-size: 1.5rem; */
61    opacity: 0;
62    transition: opacity 1s ease-in;
63}
64
65.mh-menu a:hover {
66    color: __link__;
67    transition: color 0.3s ease-in;
68}
69
70.mh-menu-wrap {
71    position: fixed;
72    /* top: 0; */
73    /* left: 0; */
74    right: 0;
75    bottom: 0;
76    z-index: 1;
77}
78
79.mh-menu-wrap .toggler {
80    position: absolute;
81    /* top: 0;
82    left: 0; */
83    right: 5px;
84    bottom: 5px;
85    opacity: 0;
86    height: 50px;
87    width: 50px;
88    cursor: pointer;
89    z-index: 2;
90}
91
92.mh-menu-wrap .hamburger {
93    position: absolute;
94    /* top: 0;
95    left: 0; */
96    right: 0;
97    bottom: 0;
98    height: 60px;
99    width: 60px;
100    background: transparent;
101    padding: 1rem;
102    display: flex;
103    flex-direction: column;
104    align-items: center;
105    justify-content: center;
106    z-index: 1;
107}
108
109
110/* Hamburger line */
111
112.mh-menu-wrap .hamburger>div {
113    position: relative;
114    top: 0;
115    left: 0;
116    width: 100%;
117    height: 3px;
118    /* 가로줄 두께 */
119    background: __theme_color__;
120    flex: none;
121    display: flex;
122    align-items: center;
123    justify-content: center;
124    transition: 0.4s;
125}
126
127
128/* Hamburger top & bottom line */
129
130.mh-menu-wrap .hamburger>div:before,
131.mh-menu-wrap .hamburger>div:after {
132    content: "";
133    position: absolute;
134    left: 0;
135    top: 0;
136    background: inherit;
137    height: 3px;
138    /* 세로줄 두께 */
139    width: 100%;
140    z-index: 1;
141    transform: rotate(90deg);
142    /* 햄버거를 십자가로  */
143}
144
145
146/* .mh-menu-wrap .hamburger>div:before {
147    top: 2px;
148}
149
150.mh-menu-wrap .hamburger>div:after {
151    top: -1px;
152} */
153
154
155/* Toggler Animation */
156
157.mh-menu-wrap .toggler:checked+.hamburger>div {
158    transform: rotate(135deg);
159}
160
161.mh-menu-wrap .toggler:checked+.hamburger>div:before,
162.mh-menu-wrap .toggler:checked+.hamburger>div:after {
163    top: 0;
164    transform: rotate(90deg);
165}
166
167
168/* Rotate on hover when checked */
169
170.mh-menu-wrap .toggler:checked:hover+.hamburger>div {
171    transform: rotate(225deg);
172}
173
174
175/* Show Menu */
176
177.mh-menu-wrap .toggler:checked~.mh-menu {
178    opacity: 1;
179    width: 200px;
180    transition: all var(--menu-speed) ease;
181}
182
183.mh-menu-wrap .toggler:checked~.mh-menu>div {
184    opacity: 1;
185    transition: opacity 0.4s ease-in;
186    width: 100%;
187    height: 100%;
188}
189
190.mh-menu-wrap .toggler:checked~.mh-menu>div a {
191    opacity: 1;
192    transition: opacity 0.5s ease-in;
193}