|
|
| 1번째 줄: |
1번째 줄: |
| :root {
| | {{삭제요청}} |
| --menu-size: 50px;
| |
| }
| |
| | |
| .wrapper{
| |
| display: flex;
| |
| flex-direction: column;
| |
| height: 100vh;
| |
| width: 100vw;
| |
| justify-content: center;
| |
| align-items: center;
| |
| }
| |
| | |
| .navbar {
| |
| display: flex;
| |
| height: var(--menu-size);
| |
| width: 350px;
| |
| justify-content: stretch;
| |
| align-items: center;
| |
| background-color: gray;
| |
| padding: 1%;
| |
| }
| |
| | |
| .header {
| |
| color: white;
| |
| font-family: sans-serif;
| |
| font-size: 1.5em;
| |
| margin-left: 10px;
| |
| }
| |
| | |
| #checkbox {
| |
| position: absolute;
| |
| width: 0;
| |
| }
| |
| | |
| .menu {
| |
| display: block;
| |
| position: relative;
| |
| bottom: 57px;
| |
| right: 10px;
| |
| margin-left: auto;
| |
| height: var(--menu-size);
| |
| width: var(--menu-size);
| |
| background-color: inherit;
| |
| border-radius: 10px;
| |
| /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); */
| |
| transition: 0.2s ease-in-out;
| |
| cursor: pointer;
| |
| }
| |
| | |
| /* #checkbox:checked + .menu {
| |
| background-color: white;
| |
| } */
| |
| | |
| .menu::before {
| |
| content: "";
| |
| display: block;
| |
| position: absolute;
| |
| height: 10%;
| |
| width: calc(var(--menu-size) * 0.7);
| |
| background-color: black;
| |
| border-radius: 1000px;
| |
| transform: translate(
| |
| calc(var(--menu-size) * 0.15),
| |
| calc(var(--menu-size) * 0.3)
| |
| );
| |
| transition: 0.2s ease-in-out;
| |
| }
| |
| | |
| .menu::after {
| |
| content: "";
| |
| display: block;
| |
| position: absolute;
| |
| height: 10%;
| |
| width: calc(var(--menu-size) * 0.7);
| |
| background-color: black;
| |
| border-radius: 1000px;
| |
| transform: translate(
| |
| calc(var(--menu-size) * 0.15),
| |
| calc(var(--menu-size) * 0.6)
| |
| );
| |
| transition: 0.2s ease-in-out;
| |
| }
| |
| | |
| #checkbox:checked + .menu::before {
| |
| transform: translate(calc(var(--menu-size) * 0.15), 450%) rotateZ(-45deg);
| |
| }
| |
| | |
| #checkbox:checked + .menu::after {
| |
| transform: translate(calc(var(--menu-size) * 0.15), 450%) rotateZ(45deg);
| |
| }
| |
| | |
| #checkbox:not(:checked) + .menu:hover {
| |
| background-color: lightgray;
| |
| }
| |
| | |
| #checkbox:not(:checked) + .menu:hover::before {
| |
| transform: translate(
| |
| calc(var(--menu-size) * 0.15),
| |
| calc(var(--menu-size) * 0.3)
| |
| )
| |
| rotate(-10deg);
| |
| }
| |
| | |
| #checkbox:not(:checked) + .menu:hover::after {
| |
| transform: translate(
| |
| calc(var(--menu-size) * 0.15),
| |
| calc(var(--menu-size) * 0.6)
| |
| )
| |
| rotate(10deg);
| |
| } | |
| | |
| .dropdown-wrapper {
| |
| display: flex;
| |
| width: 365px;
| |
| }
| |
| | |
| .dropdown {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 5px;
| |
| position: absolute;
| |
| width: 350px;
| |
| transition: 0.2s ease-in;
| |
| }
| |
| | |
| .item {
| |
| color: white;
| |
| font-family: sans-serif;
| |
| font-size: 0;
| |
| margin-left: 15px;
| |
| margin-bottom: 15px;
| |
| }
| |
| | |
| #checkbox:checked + .menu + .dropdown {
| |
| position: absolute;
| |
| width: 350px;
| |
| height: fit-content;
| |
| background-color: gray;
| |
| padding: 1%;
| |
| }
| |
| | |
| #checkbox:checked + .menu + .dropdown .item:nth-child(1) {
| |
| font-size: 1.2em;
| |
| transition: 0.3s ease-in;
| |
| }
| |
| | |
| #checkbox:checked + .menu + .dropdown .item:nth-child(2) {
| |
| font-size: 1.2em;
| |
| transition: 0.3s ease-in 0.1s;
| |
| }
| |
| | |
| #checkbox:checked + .menu + .dropdown .item:nth-child(3) {
| |
| font-size: 1.2em;
| |
| transition: 0.3s ease-in 0.2s;
| |
| }
| |
| | |
| #checkbox:checked + .menu + .dropdown .item:nth-child(4) {
| |
| font-size: 1.2em;
| |
| transition: 0.3s ease-in 0.3s;
| |
| }
| |
| | |
| #checkbox:checked + .menu + .dropdown .item:nth-child(5) {
| |
| font-size: 1.2em;
| |
| transition: 0.3s ease-in 0.4s;
| |
| } | |