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}