: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; }