66 lines
1.1 KiB
CSS
66 lines
1.1 KiB
CSS
/* 햄버거 메뉴 */
|
|
.menu {
|
|
margin-top: 8px;
|
|
height: 32px;
|
|
width: 32px;
|
|
position: relative;
|
|
z-index: 70;
|
|
}
|
|
.menu:has(.hambergerIcon.open) {
|
|
position: fixed;
|
|
top: 48px;
|
|
right: 16px;
|
|
}
|
|
|
|
.menu:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hambergerIcon {
|
|
height: 4px;
|
|
width: 24px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: 50px;
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
transition: all ease 0.5s;
|
|
}
|
|
|
|
.hambergerIcon::before,
|
|
.hambergerIcon::after {
|
|
content: '';
|
|
position: absolute;
|
|
height: inherit;
|
|
border-radius: inherit;
|
|
background-color: inherit;
|
|
margin: auto;
|
|
width: 50%;
|
|
transition: all ease 0.2s;
|
|
}
|
|
|
|
.hambergerIcon::before {
|
|
top: -8px;
|
|
left: 0;
|
|
transform-origin: left;
|
|
}
|
|
|
|
.hambergerIcon::after {
|
|
bottom: -8px;
|
|
right: 0;
|
|
transform-origin: right;
|
|
}
|
|
|
|
.hambergerIcon.open {
|
|
transform: translate(-50%, -50%) rotate(135deg);
|
|
}
|
|
|
|
.hambergerIcon.open::before {
|
|
top: 0;
|
|
transform: translateX(100%) rotate(-90deg);
|
|
}
|
|
|
|
.hambergerIcon.open::after {
|
|
bottom: 0;
|
|
transform: translateX(-100%) rotate(-90deg);
|
|
} |